您的当前位置：首页正文

Vue3.0 路由

来源：榕意旅游网

Vue Router 是的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

嵌套路由映射
动态路由选择
模块化、基于组件的路由配置
路由参数、查询、通配符
展示由 Vue.js 的过渡系统提供的过渡效果
细致的导航控制
自动激活 CSS 类的链接
HTML5 history 模式或 hash 模式
可定制的滚动行为
URL 的正确编码

路由的基本使用

用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。

提供了基于 npm 的 CDN 链接。上述链接将始终指向 npm 上的最新版本。你也可以通过像 https://unpkg.com/vue-router@4.0.15/dist/vue-router.global.js 这样的 URL 来使用特定的版本或 Tag。

安装 vue router

使用案列

在项目中的src文件夹下面创建一个router的文件夹和一个views文件夹

在router文件夹下面创建一个index.js文件

在views文件夹下面创建一个Home.vue组件和一个List.vue组件

index.js文件内容：


import { createRouter,createWebHashHistory,createWebHistory } from "vue-router"; //导入vue-router路由模块,createWebHashHistor函数
import Home from "../views/Home.vue" //导入Home组件
import List from "../views/List.vue"
 
const routes = [
    {
        path: "/",  //路径:        
        //component: List  //path路径所对应的组件
 
        //表示如果路径是/ 那么就跳转到/list路径，而/list路径对应的是List组件，所以就显示出List组件的内容了
        //举列：当浏览器输入的是：http://localhost:5173/ 则会重定向跳转到 http://localhost:5173/#/list
        redirect:"/list" 
 
    },
    {
        path: "/home",  //路径
        component: Home //path路径所对应的组件：路径/ 和/home 都可以路由到Home组件
 
    },
    {
        path: "/list",  //路径
        component: List //path路径所对应的组件
    }
]
 
//创建路由对象
const router = createRouter({
    //history:createWebHashHistory()   这种方式是按照hash路由模式来路由导航，这种路由模式的url地址会存在 /#/ 样式是：http://localhost:5173/#/list
    history: createWebHistory(),     //这种方式基于浏览器 history API 的路由模式，url的样式是：http://localhost:5173/list
    routes, //routes:routes的缩写
 
})
 
export default router //导出router路由对象//导出router路由对象
 
 
// createWebHashHistory() 是 Vue Router 提供的一种基于浏览器 URL 的 hash 路由模式，它将路由添加到 URL 中的 hash 中
// 例如：/#/home、/#/about。这种模式可以避免服务器配置的问题，而且支持所有浏览器。
// 但是，由于 URL 中添加了 hash，因此在搜索引擎的 SEO 优化中存在一些问题。

main.js文件内容

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

//import router from "../src/router" //导入路由js          注意：如果仅仅是指定了一个文件夹router，程序会自动去router文件夹下寻找index.js，并导入
//import router from "../src/router/index" //导入路由js    注意：.js可以省略
import router from "../src/router/index.js" //导入路由js 
//import router from "../src/router/myindex.js" //导入路由js  注意：如果我们的路由文件不是index.js 那么我们就得指定具体的名称了

var app=createApp(App)

app.use(router) //注册路由组件

app.mount("#app")

App.vue组件

<template>
  <div>
    {{ name }}
    <!-- <RouterView></RouterView> 是 Vue.js 框架中的一个组件，用于渲染与当前路由匹配的组件视图。当用户在应用中导航到不同的页面时，<RouterView> 组件会负责显示与当前路由对应的组件。 -->
    <!-- 举列：如果浏览器中输入：http://localhost:5173/#/list 这个路径对应的组件list就会插入到<RouterView></RouterView>中 -->
    <router-view></router-view> 
  </div>
</template>
<script setup>
import { ref, } from 'vue';

//导入模板即注册：注册的名字就是你导入用的名称Home
import Home from "./views/Home.vue" //导入Home组件:
import List from "./views/List.vue" //导入List组件:

const name = ref("李大锤");

</script>

Home.vue组件

<template>
    <div>Home</div>
</template>

List.vue组件

<template>
    <div>List</div>
</template>

路由的懒加载

懒加载的作用是：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行加载

用法：

component: () => import("../views/Home.vue")

案列

index.js路由文件

import { createRouter, createWebHashHistory,createWebHistory } from "vue-router"; //导入vue-router路由模块,createWebHashHistor函数
//import Home from "../views/Home.vue" //异步加载的组件，这里不需要
//import List from "../views/List.vue" //异步加载的组件，这里不需要进行导入,所以要注释掉

const routes = [
    {
        path: "/",  //路径:        
        redirect: {
            name: "mylist" //重定向到路由名称为mylist的路由中，这样当浏览器输入的是：http://localhost:5173/ 则会重定向跳转到 http://localhost:5173/list
        }

    },
    {
        path: "/home",  //路径
        //当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载
        //这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
        component: () => import("../views/Home.vue")

    },
    {
        path: "/list",  //路径
        name: "mylist",  //路由名称，如果不指定name 默认的name为default

        //当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载
        //这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
        component: () => import("../views/List.vue")
    }
]

//创建路由对象
const router = createRouter({
    //history:createWebHashHistory()   这种方式是按照hash路由模式来路由导航，这种路由模式的url地址会存在 /#/ 样式是：http://localhost:5173/#/list
    history: createWebHistory(),     //这种方式基于浏览器 history API 的路由模式，url的样式是：http://localhost:5173/list
    routes, //routes:routes的缩写

})

export default router //导出router路由对象//导出router路由对象

路由别名的使用

在单页面应用中，网页具体路径显示是由vue-router配置中 path 决定的，path设置的是什么就显示什么，和name无关。

不同路由路径下页面渲染的内容，是根据component所对应的组件来进行渲染的，和name无关。

其实name就相当于给你的path取个别名，方便使用，路由并不是一定要设置name值。（如果不设置name，vue-router默认name值为 default）

index.js文件内容：

import { createRouter,createWebHashHistory } from "vue-router"; //导入vue-router路由模块,createWebHashHistor函数
import Home from "../views/Home.vue" //导入Home组件
import List from "../views/List.vue"

const routes = [
    {
        path: "/",  //路径:        
        //component: Home  //path路径所对应的组件

        //表示如果路径是/ 那么就跳转到/list路径，而/list路径对应的是List组件，所以就显示出List组件的内容了
        //举列：当浏览器输入的是：http://localhost:5173/ 则会重定向跳转到 http://localhost:5173/#/list
        //redirect:"/list" 

        //redirect:"/list" 这种重定向是使用的路径方式来重定向的。我们也可以通过路由的name来重定向，如下：
        redirect:{
            name:"mylist" //重定向到路由名称为mylist的路由中，这样当浏览器输入的是：http://localhost:5173/ 则会重定向跳转到 http://localhost:5173/#/list
        }

    },
    {
        path: "/home",  //路径
        component: Home //path路径所对应的组件：路径/ 和/home 都可以路由到Home组件

    },
    {
        path: "/list",  //路径
        name:"mylist",  //路由名称，如果不指定name 默认的name为default
        component: List //path路径所对应的组件
    }
]

//创建路由对象
const router = createRouter({
    history: createWebHashHistory(),//按照hash路由模式来路由导航，这种模式的url地址会存在 /#/
    routes, //routes:routes的缩写

})

export default router //导出router路由对象//导出router路由对象

嵌套路由：子级路由

就是父路由嵌套子路由.url 上就是/list 嵌套两个子路由后就是/list/lista 和/list/listb

就拿上面的使用案列来说：

路径	组件
/list	List
/list/lista	ListA
/list/listb	ListB

List.vue组件

<template>
    <div>
        <ul class="tabbar">
            <router-link custom to="/list/lista" v-slot="{ isActive, navigate }">
                <li :class="isActive ? 'aaa' : ''" @click="navigate">正在热映</li>
            </router-link>
            <router-link custom to="/list/listb" v-slot="{ isActive, navigate }">
                <li :class="isActive ? 'aaa' : ''" @click="navigate">即将上映</li>
            </router-link>
        </ul>
        <!-- <router-link to="/list/lista">正在热映</router-link>
        <router-link to="/list/listb">即将上映</router-link> -->
    </div>
    <div>
        <router-view></router-view>
    </div>
</template>
<script setup>
import ListA from './ListA.vue';
import ListB from './ListB.vue';

</script>
<style scoped>
ul {
    display: flex;
    position: fixed;
    /* bottom: 0; 元素在页面底部*/
    /* top: 0; 元素在页面顶部 */
    top: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    list-style-type: none;
    justify-content: space-between;

}

li {
    flex: 1;
    text-align:left;

}

.aaa {
    color: red;
}

div {
    display: flex;
    width: 100%;
    justify-content: space-between;
    height: 50px;
    line-height: 50px;
    /* background: gray; */
}
</style>

ListA.vue组件

<template>
    <div>ListA</div>
</template>

ListB.vue组件

<template>
    <div>ListA</div>
</template>

index.js路由文件内容

import { createRouter, createWebHashHistory } from "vue-router"; //导入vue-router路由模块,createWebHashHistor函数
import Home from "../views/Home.vue" //导入Home组件
import List from "../views/List.vue"
import ListA from "../views/ListA.vue"
import ListB from "../views/ListB.vue"

const routes = [
    {
        path: "/",  //路径:        
        //component: Home  //path路径所对应的组件

        //表示如果路径是/ 那么就跳转到/list路径，而/list路径对应的是List组件，所以就显示出List组件的内容了
        //举列：当浏览器输入的是：http://localhost:5173/ 则会重定向跳转到 http://localhost:5173/#/list
        //redirect:"/list" 

        //redirect:"/list" 这种重定向是使用的路径方式来重定向的。我们也可以通过路由的name来重定向，如下：
        redirect: {
            name: "mylist" //重定向到路由名称为mylist的路由中，这样当浏览器输入的是：http://localhost:5173/ 则会重定向跳转到 http://localhost:5173/#/list
        }

    },
    {
        path: "/home",  //路径
        component: Home //path路径所对应的组件：路径/ 和/home 都可以路由到Home组件

    },
    {
        path: "/list",    //路径
        name: "mylist",   //路由名称，如果不指定name 默认的name为default
        component: List,  //path路径所对应的组件
        children: [       //通过children配置子级路由
            {
                path: 'lista', //可以写成：'/list/lista' 但是不要写成 '/lista'
                component: ListA
            },
            {
                path: 'listb',//可以写成：'/list/listb' 但是不要写成 '/listb'
                component: ListB
            }
        ]
    }
]

//创建路由对象
const router = createRouter({
    history: createWebHashHistory(),//按照hash路由模式来路由导航，这种模式的url地址会存在 /#/
    routes, //routes:routes的缩写

})

export default router //导出router路由对象//导出router路由对象

路由案列+路由拦截

index.js路由

import { createRouter, createWebHistory } from "vue-router"; //导入vue-router路由模块,createWebHashHistor函数

const routes = [
    {
        path: "/",  //路径: 
        redirect: "/Films"  //涉及到多级页面跳转需要用路径的跳转，不能用name的跳转; 浏览器进入http://localhost:5173/ 首先要跳转的路径是/Films，即：要跳转到http://localhost:5173/Films，而进入http://localhost:5173/Films后又发现/Films要重定向到/Films/NowPlaying，这样就实现了打开http://localhost:5173/就加载出来了http://localhost:5173/Films/NowPlaying内容
        // redirect: {
        //     name: "Films" //重定向到路由名称为Tabbar的路由中，这样当浏览器输入的是：http://localhost:5173/ 则会重定向跳转到 http://localhost:5173/Films
        // }

    },
    {
        path: "/Navbar",  //路径：导航栏
        name: "Navbar",
        //当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载
        //这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
        component: () => import("../views/Navbar.vue")

    },
    {
        path: "/FilmsDetail/:myid/:myname",  //路径：电影内容详细  "/FilmsDetail/:myid"的意思是：当路由以/FilmsDetail/为开头那么它后面的就是myid参数：举列：http://localhost:5173/FilmsDetail/123  那么这个123就是myid参数； 如果存在两个参数呢？"/FilmsDetail/:myid/:myname"  举列：http://localhost:5173/FilmsDetail/123/lily 那么这个123就是myid参数，lily就是myname参数
        name: "FilmsDetail",  //路由名称，如果不指定name 默认的name为default

        //当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载
        //这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
        component: () => import("../views/FilmsDetail.vue")
    },
    {
        path: "/Tabbar",  //路径：底部选项卡
        name: "Tabbar",  //路由名称，如果不指定name 默认的name为default

        //当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载
        //这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
        component: () => import("../views/Tabbar.vue"),

    },
    {
        path: "/Films",  //路径:电影
        name: "Films",  //路由名称，如果不指定name 默认的name为default

        //当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载
        //这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
        component: () => import("../views/Films.vue"),
        children: [       //通过children配置子级路由
            {
                path: 'NowPlaying', //可以写成：'/Films/NowPlaying' 但是不要写成 '/NowPlaying'(正在热映)
                name: "NowPlaying",
                component: () => import("../views/NowPlaying.vue")
            },
            {
                path: 'ComingSoon', //可以写成：'/Films/ComingSoon' 但是不要写成 '/ComingSoon'(即将上映)
                component: () => import("../views/ComingSoon.vue")
            },
            {
                //为什么在子路由中添加一个Films路由？：答：因为在进入Films组件后就需要立即加载NowPlaying组件的内容。:注意：这里需要加斜杆/Films  ；
                //从app.vue组件中进入Films组件的时候，跳转的地址是：http://localhost:5173/Films，这时候就找到了顶级路由/Films，到然进入子级路由children，发现了后/Films需要跳转到/Films/NowPlaying
                path: '/Films',
                redirect: "/Films/NowPlaying"
            },

        ]
    },
    {
        path: "/Cinemas",  //路径:影院
        name: "Cinemas",   //路由名称，如果不指定name 默认的name为default

        //当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载
        //这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
        component: () => import("../views/Cinemas.vue")
    },
    {
        path: "/Home",  //路径:我的
        name: "Home",   //路由名称，如果不指定name 默认的name为default

        //当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载
        //这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
        component: () => import("../views/Home.vue"),
        meta: //加一个自定义参数：里面的参数随便我们定
        {
            requireAuth: true,   // 对当前路由路径做一个标记，代表进入这个页面需要登陆才能进。用于在router.beforeEach里面做登陆验证的时候，判断这个requireAuth参数是否为true，为true则需要登陆才能进入
            aaa: "wowow"
        }
    },
    {
        path: "/Login",  //登陆
        name: "Login",   //路由名称，如果不指定name 默认的name为default
        component: () => import("../views/Login.vue"),
    },
    {
        path: "/:pathMatch(.*)",  //404错误
        name: "NotFound",  //路由名称，如果不指定name 默认的name为default
        component: () => import("../views/NotFound.vue")
    }

]

//创建路由对象
const router = createRouter({
    history: createWebHistory(),     //这种方式基于浏览器 history API 的路由模式，url的样式是：http://localhost:5173/list
    routes: routes,
})

//路由全局拦截：在进入页面之前就进行拦截。可以用于做用户登陆验证
//参数to：  表示即将进入的目标路由对象
//参数from：表示当前导航正要离开的路由
//参数next：调用该方法后才能进入下一个钩子。next() 直接进入下一个钩子,next(false) 中断当前的导航。next('/') 或者 next({ path: '/' }) 则会进入一个不同的地址。
router.beforeEach(async (to, from, next) => {
    const isAuthenticated = await localStorage.getItem('token');

    console.log(to.fullPath); //全路径
    console.log(to.path);     //路径
    console.log(to.name);     //路由名称
    console.log(to.params);   //路由参数：http://localhost:5173/FilmsDetail/123
    console.log(to.query);    //路由参数：http://localhost:5173/FilmsDetail?myid=123
    console.log(to.meta);     //路由自定义参数


    //meta.requireAuth表示当前请求的页面需要验证, 并且未登录
    if (to.meta.requireAuth && !isAuthenticated) {
        next(`/login?redirect=${to.path}`) //to.fullPath
    }
    else next() //如果不是请求的登陆界面，或者已经登陆过了，则直接跳转到用户请求的界面
})

//路由全局拦截：在进入页面之后才进行触发拦截。
router.afterEach(async (to, form) => {
    //用的比较少，一般用于收集一些日志信息,做用户行为分析:例如：收集页面浏览量:PV
})

export default router //导出router路由对象//导出router路由对象

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文