vue3 路由组件

 

 

# 路由

路由(Router)是一种关系，是绑定了应用程序(页面组件)和url访问地址的一对一的映射关系。

在前端开发像vue这类的框架中，我们所听到的路由通常就是指代了帮开发者完成路由关系绑定的工具类/对象。

vue开发中，我们前端项目可以通过安装vue-router插件，方便的实现类似服务端的路由分发机制。可以根据url地址的路径不同，让vue项目显示不同的页面组件内容。

中文文档：https://next.router.vuejs.org/zh/

# 在客户端项目的根目录下，package.json的同级目录
npm install vue-router@next
# yarn add vue-router@next  # 安装最新版本

 

9.1 路由初始化

创建src/router/index.js，代码：

 

注册路由组件到vue中，`src/main.js`,代码：

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
// 注册[注入]路由组件实例对象到vm中
import route from "./router/index.js";
// 客户端vue中，目录下的index.js相当于 python中的__init__.py，只是index.js中的代码不会像__init__.py，那样自动执行而已
// import router from "./router/index";

createApp(App).use(route).mount('#app')

路由分发

router-view是vue-router提供的一个组件，这个组件可以根据不同的url地址，读取路由列表中对应的组件。

App.vue，代码：

 

<script setup>
</script>

<template>
  <!-- router-view的本质就是在内部使用location.pathname匹配判断url路径，加载不同的组件-->
  <router-view></router-view>
</template>

<style scoped>
</style>

 

在vue-router被注册到vue项目时，vue-router会自动给vue组件对象内部新增2个路由操作的子对象

路由对象描述选项式API组合式API
路由跳转对象 用于实现页面跳转效果 this.$router import { useRouter} from 'vue-router' const router = useRouter()
路由参数对象 用于获取来自地址栏的参数 this.$route import { useRoute} from 'vue-router' const route = useRoute()

 

 

 

页面跳转

vue-router提供了2种方式调用router进行页面跳转。

### router-link组件跳转

router-link组件是vue-router组件提供的，本质上就是js替换页面部分内容，模拟页面跳转效果，不需要导包直接使用。

将来项目中，router-link用于跳转站内的页面，a标签用于跳转站外的页面

<router-link to="/" :class="{current: current===0}">站点首页</router-link>
<router-link to="/reg" :class="{current: current===1}">登录注册</router-link>

 

src/route/router.js，代码：

import {createRouter, createWebHistory} from 'vue-router';
import Login from "../views/Login.vue";

const route = createRouter({
    history:createWebHistory(), //url地址显示模式
    // history, 指定路由的模式, 此处默认使用的是hash模式, vue2.0版本中， mode: "history" / mode: "hash"
    //      createWebHashHistory    hash模式            ===>   http://localhost:5050/#/login
    //[常用] createWebHistory        history模式         ===>   http://localhost:5050/login
    //      createMemoryHistory     带缓存的history模式   ===>   http://localhost:5050/
    routes:[
        {
            path:"/", //组件的访问路径，必须以斜杠开头
            name:"Login", //路由别名，一般名字保持跟组件对象名一致，但是格式是字符串的
            component: Login, //组件对象，不能加引号，直接填写对象即可
        },
        {
            path: "/login",                          // 访问路径，必须以斜杠开头
            name: "myLogin",                           // 组件别名[与组件文件名同名]
            component: Login,                        // 组件对象，一个组件可以绑定多个url地址，当多个地址绑定同一个组件，别名不能重复
        },
        {
            path: "/goods",
            name: "Goods",
            component: import("../views/Goods.vue")
        },
        {
            path: "/group/api",
            name: "GroupApi",
            component: import("../views/GroupApi.vue")
        },
        {
            path: "/page/a",
            name: "PageA",
            component: import("../views/PageA.vue")
        },
        {
            path: "/page/b",
            name: "PageB",
            component: import("../views/PageB.vue")
        },
        {
            path: "/page/c",
            name: "PageC",
            component: import("../views/PageC.vue")
        },
    ]
})

export default route;

 

 

src/views/PageA.vue，代码：

<template>
  <h1>pageA</h1>
  <div>
<!--    a标签跳转页面会自动刷新页面    -->
<!--    <a href="/page/a">A页面</a>-->
<!--    <a href="/page/b">B页面</a>-->
<!--    <a href="/page/c">C页面</a>-->

    <router-link to="/page/a">A页面</router-link>
    <router-link to="/page/b">B页面</router-link>
    <router-link to="/page/c">C页面</router-link>
  </div>
</template>

<script setup>

</script>

<style scoped>
a{
  color: blue;
}
.router-link-active{
  text-decoration: none;
}
</style>

src/views/PageB.vue，代码：

<template>
  <h1>pageB</h1>
  <div>
<!--    a标签跳转页面会自动刷新页面    -->
<!--    <a href="/page/a">A页面</a>-->
<!--    <a href="/page/b">B页面</a>-->
<!--    <a href="/page/c">C页面</a>-->

    <router-link to="/page/a">A页面</router-link>
    <router-link to="/page/b">B页面</router-link>
    <router-link to="/page/c">C页面</router-link>
  </div>
</template>

<script setup>

</script>

<style scoped>
a{
  color: blue;
}
.router-link-active{
  text-decoration: none;
}
</style>

src/views/PageC.vue，代码：

<template>
  <h1>pageC</h1>
  <div>
<!--    a标签跳转页面会自动刷新页面    -->
<!--    <a href="/page/a">A页面</a>-->
<!--    <a href="/page/b">B页面</a>-->
<!--    <a href="/page/c">C页面</a>-->

    <router-link to="/page/a">A页面</router-link>
    <router-link to="/page/b">B页面</router-link>
    <router-link to="/page/c">C页面</router-link>
  </div>
</template>

<script setup>

</script>

<style scoped>
a{
  color: blue;
}
.router-link-active{
  text-decoration: none;
}
</style>

 

 

js跳转
vue-router组件提供的，标签跳转不会代码验证和拦截，
所以有时希望跳转前进行一些拦截操作，就需要使用js跳转

<template>
    <li><a href="" @click.prevent="goto('/')">js跳转到首页</a></li>
    <li><a href="" @click.prevent="goto('/register')">js跳转到注册</a></li>
</template>
<script>
export default {
  name: "Menu",
  // ...
  methods:{
    goto(url){
      this.$router.push(url);        // 跳转到指定的url地址对应的页面中
      // this.$router.go(1)          // 跳转到指定的n个页面，正数表示前进，负数表示后台
      // this.$router.forward()      // 前进下一个页面，相当于go(1)
      // this.$router.back()         // 返回上一页，相当于go(-1)
    }
  }
}
</script>

 

 

router对象跳转

标签跳转不会进行代码验证和拦截，因此可以使用vue-router组件提供的router对象实现跳转之前的验证和拦截.

<script setup>
import {useRouter} from "vue-router";
const router = useRouter();
const jump = ()=>{

   // 在前面编写判断逻辑相关的代码，再决定是否跳转，一般用于完成表单验证。

   // 使用url路径跳转，router.push("url路径");
  // router.push("/page/b");
  // router.push({"path": "/page/b"});  // 一般采用上面的简写
  // 使用路由别名
  router.push({"name":"PageB"})
  // 注意：router-link组件或者router对象都不能跳转到其他网站，只能是站内跳转
  // router.push("http://www.baidu.com")

}
</script>

<template>
  <h1>PageA</h1>
  <div>
<!--    a标签跳转页面会自动刷新页面    -->
<!--    <a href="/page/a">A页面</a>-->
<!--    <a href="/page/b">B页面</a>-->
<!--    <a href="/page/c">C页面</a>-->
    <router-link to="/page/a">A页面</router-link>
    <router-link to="/page/b">B页面</router-link>
    <router-link to="/page/c">C页面</router-link>
  </div>
  <button @click="jump()">页面跳转到B页面</button>
</template>

<style scoped>
a{
  color: blue;
}
.router-link-active{
  text-decoration: none;
}
</style>

 

参数传递和接收

在上面的页面跳转中， 不管我们使用的router-link组件标签，还是直接通过userRouter，实际上都是最终都是router对象来进行页面跳转的。那么除了router用于进行页面的跳转以外，在vue-router注册到vue框架以后，vue-router还提供了一个route对象给我们用于获取不同页面之间的参数传递和接收的操作。

route提供接收参数的方式有2种，分别是路由参数（路径参数，params）与查询参数（query）。

 

 

路由地址组合式API选项式API
/home/:id import {useRoute} from "vue-router"; const route = useRoute() route.params.id id就是路径参数名 this.$route.params.id id就是路径参数名
/home?name=xiaoming import {useRoute} from "vue-router"; const route = useRoute() route.query.name this.$route.query.name

 

 

route.query.<变量名> # 接收页面跳转时，地址栏附带的查询字符串参数中指定变量名对应的值
/home?name=xiaoming # 接收xiaoming，则可以在代码： route.query.name

route.params.<路径别名> # 接收页面跳转时，地址栏中url路径中指定部分的路径别名对应的具体值

/user/100 # 接收100，则需要完成2件事件：
# 第1，在src/route/router.js文件中，声明路由的格式为： path: "/user/:id"
# 第2，在页面跳转后，新页面中的js代码里面接收100，则 route.params.id

src/views/StudentList.vue，代码：

 

<script setup>
import {ref} from "vue";
let data_list = ref([
  {"id":1,"name":"xiaoming","age":17},
  {"id":5,"name":"xiaohong","age":21},
  {"id":11,"name":"xiaobai","age":22},
])
</script>

<template>
  <h1>学生列表</h1>
  <ul>
    <li v-for="student in data_list"><router-link :to="`/students/${student.id}/${student.name}?age=${student.age}`">{{student.name}}</router-link></li>
  </ul>
</template>

<style scoped>

</style>

 

 

 src/views/StudentDetail.vue，代码：

<script setup>
import {useRoute,useRouter} from "vue-router";
const route = useRoute();
const router = useRouter();
// 接收所有的路由参数
console.log(route.params);
// 获取单个路由参数
console.log(route.params.id);

const back = ()=>{
  router.go(-1);
  // router.back();
}
</script>

<template>
  <h1>学生{{route.params.name}}信息详情</h1>
  <p>接受路由参数,id={{route.params.id}}</p>
  <button @click="back">返回上一页</button>
</template>

<style scoped>

</style>

 

 

<script setup>
import {useRoute,useRouter} from "vue-router";
const route = useRoute();
const router = useRouter();
// 接收所有的路由参数
console.log(route.params);
// 获取单个路由参数
console.log(route.params.id);

const back = ()=>{
  router.go(-1);
  // router.back();
}
</script>

<template>
  <h1>学生{{route.params.name}}信息详情</h1>
  <p>接受路由参数,id={{route.params.id}}</p>
  <p>接受查询参数，age={{route.query.age}}</p>
<!--  <button @click="back">返回上一页</button>-->
</template>

<style scoped>

</style>

 

 src/router/index.js，代码：

import {createRouter, createWebHistory} from 'vue-router';
import Login from "../views/Login.vue";

const route = createRouter({
    history:createWebHistory(), //url地址显示模式
    // history, 指定路由的模式, 此处默认使用的是hash模式, vue2.0版本中， mode: "history" / mode: "hash"
    //      createWebHashHistory    hash模式            ===>   http://localhost:5050/#/login
    //[常用] createWebHistory        history模式         ===>   http://localhost:5050/login
    //      createMemoryHistory     带缓存的history模式   ===>   http://localhost:5050/
    routes:[
        {
            path:"/", //组件的访问路径，必须以斜杠开头
            name:"Login", //路由别名，一般名字保持跟组件对象名一致，但是格式是字符串的
            component: Login, //组件对象，不能加引号，直接填写对象即可
        },
        {
            path: "/login",                          // 访问路径，必须以斜杠开头
            name: "myLogin",                           // 路由别名[与组件文件名同名]
            component: Login,                        // 组件对象，一个组件可以绑定多个url地址，当多个地址绑定同一个组件，别名不能重复
        },
        {
            path: "/goods",
            name: "Goods",
            component: import("../views/Goods.vue")
        },
        {
            path: "/group/api",
            name: "GroupApi",
            component: import("../views/GroupApi.vue")
        },
        {
            path: "/page/a",
            name: "PageA",
            component: import("../views/PageA.vue")
        },
        {
            path: "/page/b",
            name: "PageB",
            component: import("../views/PageB.vue")
        },
        {
            path: "/page/c",
            name: "PageC",
            component: import("../views/PageC.vue")
        },
        {
            path: "/students",
            name: "StudentList",
            component: import("../views/StudentList.vue")
        },
            {
            path: "/students/:id/:name",
            name: "StudentDetail",
            component: import("../views/StudentDetail.vue")
        },
    ]
})

export default route;

 

import {createRouter, createWebHistory} from 'vue-router';
import Login from "../views/Login.vue";

const route = createRouter({
    history:createWebHistory(), //url地址显示模式
    // history, 指定路由的模式, 此处默认使用的是hash模式, vue2.0版本中， mode: "history" / mode: "hash"
    //      createWebHashHistory    hash模式            ===>   http://localhost:5050/#/login
    //[常用] createWebHistory        history模式         ===>   http://localhost:5050/login
    //      createMemoryHistory     带缓存的history模式   ===>   http://localhost:5050/
    routes:[
        {
            path:"/", //组件的访问路径，必须以斜杠开头
            name:"Login", //路由别名，一般名字保持跟组件对象名一致，但是格式是字符串的
            component: Login, //组件对象，不能加引号，直接填写对象即可
        },
        {
            path: "/login",                          // 访问路径，必须以斜杠开头
            name: "myLogin",                           // 路由别名[与组件文件名同名]
            component: Login,                        // 组件对象，一个组件可以绑定多个url地址，当多个地址绑定同一个组件，别名不能重复
        },
        {
            path: "/goods",
            name: "Goods",
            component: import("../views/Goods.vue")
        },
        {
            path: "/group/api",
            name: "GroupApi",
            component: import("../views/GroupApi.vue")
        },
        {
            path: "/page/a",
            name: "PageA",
            component: import("../views/PageA.vue")
        },
        {
            path: "/page/b",
            name: "PageB",
            component: import("../views/PageB.vue")
        },
        {
            path: "/page/c",
            name: "PageC",
            component: import("../views/PageC.vue")
        },
        {
            path: "/students",
            name: "StudentList",
            component: import("../views/StudentList.vue")
        },
            {
            // path: "/students/:id/:name",
                /* 自定义了id与name两个路由参数，也叫路径参数,StudentDetail.vue这个组件中可以通过useRoute的params属性来接受

                 */
            path: "/students/:id([0-9]+)/:name", 
            name: "StudentDetail",
            component: import("../views/StudentDetail.vue")
        },
    ]
})

export default route;

 

import {createRouter, createWebHistory} from 'vue-router';
import Login from "../views/Login.vue";

const route = createRouter({
    history:createWebHistory(), //url地址显示模式
    // history, 指定路由的模式, 此处默认使用的是hash模式, vue2.0版本中， mode: "history" / mode: "hash"
    //      createWebHashHistory    hash模式            ===>   http://localhost:5050/#/login
    //[常用] createWebHistory        history模式         ===>   http://localhost:5050/login
    //      createMemoryHistory     带缓存的history模式   ===>   http://localhost:5050/
    routes:[
        {
            path:"/", //组件的访问路径，必须以斜杠开头
            name:"Login", //路由别名，一般名字保持跟组件对象名一致，但是格式是字符串的
            component: Login, //组件对象，不能加引号，直接填写对象即可
        },
        {
            path: "/login",                          // 访问路径，必须以斜杠开头
            name: "myLogin",                           // 路由别名[与组件文件名同名]
            component: Login,                        // 组件对象，一个组件可以绑定多个url地址，当多个地址绑定同一个组件，别名不能重复
        },
        {
            path: "/goods",
            name: "Goods",
            component: import("../views/Goods.vue")
        },
        {
            path: "/group/api",
            name: "GroupApi",
            component: import("../views/GroupApi.vue")
        },
        {
            path: "/page/a",
            name: "PageA",
            component: import("../views/PageA.vue")
        },
        {
            path: "/page/b",
            name: "PageB",
            component: import("../views/PageB.vue")
        },
        {
            path: "/page/c",
            name: "PageC",
            component: import("../views/PageC.vue")
        },
        {
            path: "/students",
            name: "StudentList",
            component: import("../views/StudentList.vue")
        },
            {
            // path: "/students/:id/:name",
                /* 自定义了id与name两个路由参数，也叫路径参数,StudentDetail.vue这个组件中可以通过useRoute的params属性来接受
               // :变量名，表示必填参数，不限制任何类型[路由参数，也叫路径参数，StudentDetail.vue这个组件中可以通过useRoute的params属性来接收]
                 */
            path: "/students/:id([0-9]+)/:name",  // :变量名后面跟着正则，表示必填参数，按正则匹配限制路由参数
            name: "StudentDetail",
            component: import("../views/StudentDetail.vue")
        },
    ]
})

export default route;

 

import {createRouter, createWebHistory} from 'vue-router';
import Login from "../views/Login.vue";

const route = createRouter({
    history:createWebHistory(), //url地址显示模式
    // history, 指定路由的模式, 此处默认使用的是hash模式, vue2.0版本中， mode: "history" / mode: "hash"
    //      createWebHashHistory    hash模式            ===>   http://localhost:5050/#/login
    //[常用] createWebHistory        history模式         ===>   http://localhost:5050/login
    //      createMemoryHistory     带缓存的history模式   ===>   http://localhost:5050/
    routes:[
        {
            path:"/", //组件的访问路径，必须以斜杠开头
            name:"Login", //路由别名，一般名字保持跟组件对象名一致，但是格式是字符串的
            component: Login, //组件对象，不能加引号，直接填写对象即可
        },
        {
            path: "/login",                          // 访问路径，必须以斜杠开头
            name: "myLogin",                           // 路由别名[与组件文件名同名]
            component: Login,                        // 组件对象，一个组件可以绑定多个url地址，当多个地址绑定同一个组件，别名不能重复
        },
        {
            path: "/goods",
            name: "Goods",
            component: import("../views/Goods.vue")
        },
        {
            path: "/group/api",
            name: "GroupApi",
            component: import("../views/GroupApi.vue")
        },
        {
            path: "/page/a",
            name: "PageA",
            component: import("../views/PageA.vue")
        },
        {
            path: "/page/b",
            name: "PageB",
            component: import("../views/PageB.vue")
        },
        {
            path: "/page/c",
            name: "PageC",
            component: import("../views/PageC.vue")
        },
        {
            path: "/students",
            name: "StudentList",
            component: import("../views/StudentList.vue")
        },
            {
            // path: "/students/:id/:name",
                /* 自定义了id与name两个路由参数，也叫路径参数,StudentDetail.vue这个组件中可以通过useRoute的params属性来接受
               // :变量名，表示必填参数，不限制任何类型[路由参数，也叫路径参数，StudentDetail.vue这个组件中可以通过useRoute的params属性来接收]
                 */
            // path: "/students/:id([0-9]+)/:name",  // :变量名后面跟着正则，表示必填参数，按正则匹配限制路由参数
            path: "/students/:id([0-9]+)?/:name",   // :变量名后面跟着正则，表示可选参数，按正则匹配限制路由参数
            name: "StudentDetail",
            component: import("../views/StudentDetail.vue")
        },
    ]
})

export default route;

 

 

 

你可以在同一个路由中设置有多个路由参数，它们会映射到 route.params属性上。例如：

匹配模式（router/index.js）匹配路径（浏览器地址栏）route.params（组件代码）
/users/:username /users/xiaoming { username: 'xiaoming' }
/users/:username/posts/:id /users/xiaoming/posts/10 { username: 'xiaoming', id: '10' }

除了 route.params 之外，route 对象还公开了其他有用的信息，如 route.query（如果 URL 中存在参数）、route.hash 等。

 

 

嵌套路由

嵌套路由是vue-router提供给开发者应用在同一个页面组件下公共部分内容不变的情况下，切换不同子组件的时候使用的。

使用场景：admin后台运营站点，用户中心，活动界面等。

router/index.js，代码：

 

import {createRouter, createWebHistory} from 'vue-router';
import Login from "../views/Login.vue";

const route = createRouter({
    history:createWebHistory(), //url地址显示模式
    // history, 指定路由的模式, 此处默认使用的是hash模式, vue2.0版本中， mode: "history" / mode: "hash"
    //      createWebHashHistory    hash模式            ===>   http://localhost:5050/#/login
    //[常用] createWebHistory        history模式         ===>   http://localhost:5050/login
    //      createMemoryHistory     带缓存的history模式   ===>   http://localhost:5050/
    routes:[
        {
            path:"/", //组件的访问路径，必须以斜杠开头
            name:"Login", //路由别名，一般名字保持跟组件对象名一致，但是格式是字符串的
            component: Login, //组件对象，不能加引号，直接填写对象即可
        },
        {
            path: "/login",                          // 访问路径，必须以斜杠开头
            name: "myLogin",                           // 路由别名[与组件文件名同名]
            component: Login,                        // 组件对象，一个组件可以绑定多个url地址，当多个地址绑定同一个组件，别名不能重复
        },
        {
            path: "/goods",
            name: "Goods",
            component: import("../views/Goods.vue")
        },
        {
            path: "/group/api",
            name: "GroupApi",
            component: import("../views/GroupApi.vue")
        },
        {
            path: "/page/a",
            name: "PageA",
            component: import("../views/PageA.vue")
        },
        {
            path: "/page/b",
            name: "PageB",
            component: import("../views/PageB.vue")
        },
        {
            path: "/page/c",
            name: "PageC",
            component: import("../views/PageC.vue")
        },
        {
            path: "/students",
            name: "StudentList",
            component: import("../views/StudentList.vue")
        },
            {
            // path: "/students/:id/:name",
                /* 自定义了id与name两个路由参数，也叫路径参数,StudentDetail.vue这个组件中可以通过useRoute的params属性来接受
               // :变量名，表示必填参数，不限制任何类型[路由参数，也叫路径参数，StudentDetail.vue这个组件中可以通过useRoute的params属性来接收]
                 */
            // path: "/students/:id([0-9]+)/:name",  // :变量名后面跟着正则，表示必填参数，按正则匹配限制路由参数
            path: "/students/:id([0-9]+)?/:name",   // :变量名后面跟着正则，表示可选参数，按正则匹配限制路由参数
            name: "StudentDetail",
            component: import("../views/StudentDetail.vue")
        },
        {
            path: "/admin", // 作为顶级路由，务必以/开头
            name: "Admin",
            component: import("../views/admin/Main.vue"),
            children:[  // 子组件的路由列表
                {
                    path:"user",  // 作为子路由存在时，path绝不能以/开头！！！
                    name: "User",
                    component: import("../views/admin/User.vue")
                },
                {
                    path:"goods",  // 作为子路由存在时，path绝不能以/开头！！！
                    name: "AdminGoods",
                    component: import("../views/admin/Goods.vue")
                },
            ]
        },
    ]
})

export default route;

 

 src/views/Admin/Main.vue，代码：

<script setup>

</script>

<template>
  <div class="page">
    <div class="header">
      头部
    </div>
    <div class="main">
      <div class="menu">
        <ul>
          <li><router-link to="/admin/user">用户管理</router-link></li>
          <li><router-link to="/admin/goods">商品管理</router-link></li>
        </ul>
      </div>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
    <div class="footer">
     脚部
    </div>
  </div>

</template>

<style scoped>
.header, .footer{
  height: 100px;
  background: #ccc;
}
.main{
  background: #888888;
}
.menu{
  float: left;
  background: #aaaaff;
  width: 300px;
  min-height: 400px;
}
.main:after{
  display: block;
  clear: both;
  content: "";
}
</style>

 

src/views/Admin/User.vue，代码：

<script setup>

</script>

<template>
  用户列表页面
</template>

<style scoped>

</style>

 

src/views/Admin/Goods.vue，代码：

<script setup>

</script>

<template>
  商品列表
</template>

<style scoped>

</style>

可以通过以下地址分别访问用户中心的不同页面内容：

http://127.0.0.1:5173/admin/user     ---> src/views/admin/User.vue
http://127.0.0.1:5173/admin/goods ---> src/views/admin/Goods.vue

 

 

路由守卫

路由守卫：也叫导航守卫，功能作用类似于上面的axios的拦截器。我们可以基于导航守卫编写一些在页面跳转过程中需要编写的公共代码，例如：权限的验证，页面的公共信息初始化，页面跳转之前的一些公共逻辑。不同的是axios的拦截器是拦截http请求或相应的，而路由守卫拦截的本地vue的页面跳转。

全局前置守卫

 

const router = createRouter({ ... })

router.beforeEach((to, from) => {
  // ...
  // 返回 false 以取消导航
  return false
})

 

import {createRouter, createWebHistory} from 'vue-router';
import Login from "../views/Login.vue";

const route = createRouter({
    history:createWebHistory(), //url地址显示模式
    // history, 指定路由的模式, 此处默认使用的是hash模式, vue2.0版本中， mode: "history" / mode: "hash"
    //      createWebHashHistory    hash模式            ===>   http://localhost:5050/#/login
    //[常用] createWebHistory        history模式         ===>   http://localhost:5050/login
    //      createMemoryHistory     带缓存的history模式   ===>   http://localhost:5050/
    routes:[
        {
            path:"/", //组件的访问路径，必须以斜杠开头
            name:"Login", //路由别名，一般名字保持跟组件对象名一致，但是格式是字符串的
            component: Login, //组件对象，不能加引号，直接填写对象即可
        },
        {
            path: "/login",                          // 访问路径，必须以斜杠开头
            name: "myLogin",                           // 路由别名[与组件文件名同名]
            component: Login,                        // 组件对象，一个组件可以绑定多个url地址，当多个地址绑定同一个组件，别名不能重复
        },
        {
            path: "/goods",
            name: "Goods",
            component: import("../views/Goods.vue")
        },
        {
            path: "/group/api",
            name: "GroupApi",
            component: import("../views/GroupApi.vue")
        },
        {
            path: "/page/a",
            name: "PageA",
            component: import("../views/PageA.vue")
        },
        {
            path: "/page/b",
            name: "PageB",
            component: import("../views/PageB.vue")
        },
        {
            path: "/page/c",
            name: "PageC",
            component: import("../views/PageC.vue")
        },
        {
            path: "/students",
            name: "StudentList",
            component: import("../views/StudentList.vue")
        },
            {
            // path: "/students/:id/:name",
                /* 自定义了id与name两个路由参数，也叫路径参数,StudentDetail.vue这个组件中可以通过useRoute的params属性来接受
               // :变量名，表示必填参数，不限制任何类型[路由参数，也叫路径参数，StudentDetail.vue这个组件中可以通过useRoute的params属性来接收]
                 */
            // path: "/students/:id([0-9]+)/:name",  // :变量名后面跟着正则，表示必填参数，按正则匹配限制路由参数
            path: "/students/:id([0-9]+)?/:name",   // :变量名后面跟着正则，表示可选参数，按正则匹配限制路由参数
            name: "StudentDetail",
            component: import("../views/StudentDetail.vue")
        },
        {
            path: "/admin", // 作为顶级路由，务必以/开头
            name: "Admin",
            component: import("../views/admin/Main.vue"),
            children:[  // 子组件的路由列表
                {
                    path:"user",  // 作为子路由存在时，path绝不能以/开头！！！
                    name: "User",
                    component: import("../views/admin/User.vue")
                },
                {
                    path:"goods",  // 作为子路由存在时，path绝不能以/开头！！！
                    name: "AdminGoods",
                    component: import("../views/admin/Goods.vue")
                },
            ]
        },
    ]
})

/**
 * 全局前置守卫
 * 在路由跳转之前进行拦截
 */
route.beforeEach((to, from) => {
  // ...
  // 返回 false 以取消导航
    //阻止页面跳转
  return false
})

export default route;

 

import {createRouter, createWebHistory} from 'vue-router';
import Login from "../views/Login.vue";

const route = createRouter({
    history:createWebHistory(), //url地址显示模式
    // history, 指定路由的模式, 此处默认使用的是hash模式, vue2.0版本中， mode: "history" / mode: "hash"
    //      createWebHashHistory    hash模式            ===>   http://localhost:5050/#/login
    //[常用] createWebHistory        history模式         ===>   http://localhost:5050/login
    //      createMemoryHistory     带缓存的history模式   ===>   http://localhost:5050/
    routes:[
        {
            path:"/", //组件的访问路径，必须以斜杠开头
            name:"Login", //路由别名，一般名字保持跟组件对象名一致，但是格式是字符串的
            component: Login, //组件对象，不能加引号，直接填写对象即可
        },
        {
            path: "/login",                          // 访问路径，必须以斜杠开头
            name: "myLogin",                           // 路由别名[与组件文件名同名]
            component: Login,                        // 组件对象，一个组件可以绑定多个url地址，当多个地址绑定同一个组件，别名不能重复
        },
        {
            path: "/goods",
            name: "Goods",
            component: import("../views/Goods.vue")
        },
        {
            path: "/group/api",
            name: "GroupApi",
            component: import("../views/GroupApi.vue")
        },
        {
            path: "/page/a",
            name: "PageA",
            component: import("../views/PageA.vue")
        },
        {
            path: "/page/b",
            name: "PageB",
            component: import("../views/PageB.vue")
        },
        {
            path: "/page/c",
            name: "PageC",
            component: import("../views/PageC.vue")
        },
        {
            path: "/students",
            name: "StudentList",
            component: import("../views/StudentList.vue")
        },
            {
            // path: "/students/:id/:name",
                /* 自定义了id与name两个路由参数，也叫路径参数,StudentDetail.vue这个组件中可以通过useRoute的params属性来接受
               // :变量名，表示必填参数，不限制任何类型[路由参数，也叫路径参数，StudentDetail.vue这个组件中可以通过useRoute的params属性来接收]
                 */
            // path: "/students/:id([0-9]+)/:name",  // :变量名后面跟着正则，表示必填参数，按正则匹配限制路由参数
            path: "/students/:id([0-9]+)?/:name",   // :变量名后面跟着正则，表示可选参数，按正则匹配限制路由参数
            name: "StudentDetail",
            component: import("../views/StudentDetail.vue")
        },
        {
            path: "/admin", // 作为顶级路由，务必以/开头
            name: "Admin",
            component: import("../views/admin/Main.vue"),
            children:[  // 子组件的路由列表
                {
                      meta: {authentication: true, title: "用户管理"},
                    path:"user",  // 作为子路由存在时，path绝不能以/开头！！！
                    name: "User",
                    component: import("../views/admin/User.vue")
                },
                {
                    meta: {authentication: false, title: "商品管理"},
                    path:"goods",  // 作为子路由存在时，path绝不能以/开头！！！
                    name: "AdminGoods",
                    component: import("../views/admin/Goods.vue")
                },
            ]
        },
    ]
})

/**
 * 全局前置守卫
 * 在路由跳转之前进行拦截
 */
route.beforeEach((to, from) => {
  // ...
  // 返回 false 以取消导航
    if(to.meta.authentication){
        //阻止页面跳转
        return false
    }
})

export default route;

 

 

import {createRouter, createWebHistory} from 'vue-router';
import Login from "../views/Login.vue";

const route = createRouter({
    history:createWebHistory(), //url地址显示模式
    // history, 指定路由的模式, 此处默认使用的是hash模式, vue2.0版本中， mode: "history" / mode: "hash"
    //      createWebHashHistory    hash模式            ===>   http://localhost:5050/#/login
    //[常用] createWebHistory        history模式         ===>   http://localhost:5050/login
    //      createMemoryHistory     带缓存的history模式   ===>   http://localhost:5050/
    routes:[
        {
            path:"/", //组件的访问路径，必须以斜杠开头
            name:"Login", //路由别名，一般名字保持跟组件对象名一致，但是格式是字符串的
            component: Login, //组件对象，不能加引号，直接填写对象即可
        },
        {
            path: "/login",                          // 访问路径，必须以斜杠开头
            name: "myLogin",                           // 路由别名[与组件文件名同名]
            component: Login,                        // 组件对象，一个组件可以绑定多个url地址，当多个地址绑定同一个组件，别名不能重复
        },
        {
            path: "/goods",
            name: "Goods",
            component: import("../views/Goods.vue")
        },
        {
            path: "/group/api",
            name: "GroupApi",
            component: import("../views/GroupApi.vue")
        },
        {
            path: "/page/a",
            name: "PageA",
            component: import("../views/PageA.vue")
        },
        {
            path: "/page/b",
            name: "PageB",
            component: import("../views/PageB.vue")
        },
        {
            path: "/page/c",
            name: "PageC",
            component: import("../views/PageC.vue")
        },
        {
            path: "/students",
            name: "StudentList",
            component: import("../views/StudentList.vue")
        },
            {
            // path: "/students/:id/:name",
                /* 自定义了id与name两个路由参数，也叫路径参数,StudentDetail.vue这个组件中可以通过useRoute的params属性来接受
               // :变量名，表示必填参数，不限制任何类型[路由参数，也叫路径参数，StudentDetail.vue这个组件中可以通过useRoute的params属性来接收]
                 */
            // path: "/students/:id([0-9]+)/:name",  // :变量名后面跟着正则，表示必填参数，按正则匹配限制路由参数
            path: "/students/:id([0-9]+)?/:name",   // :变量名后面跟着正则，表示可选参数，按正则匹配限制路由参数
            name: "StudentDetail",
            component: import("../views/StudentDetail.vue")
        },
        {
            path: "/admin", // 作为顶级路由，务必以/开头
            name: "Admin",
            component: import("../views/admin/Main.vue"),
            children:[  // 子组件的路由列表
                {
                      meta: {authentication: true, title: "用户管理"},
                    path:"user",  // 作为子路由存在时，path绝不能以/开头！！！
                    name: "User",
                    component: import("../views/admin/User.vue")
                },
                {
                    meta: {authentication: false, title: "商品管理"},
                    path:"goods",  // 作为子路由存在时，path绝不能以/开头！！！
                    name: "AdminGoods",
                    component: import("../views/admin/Goods.vue")
                },
            ]
        },
    ]
})

/**
 * 全局前置守卫
 * 在路由跳转之前进行拦截
 */
route.beforeEach((to, from) => {
  // ...
  // 返回 false 以取消导航
    if(to.meta.authentication){
        // //阻止页面跳转
        // return false
        // 将用户重定向到登录页面
        return { name: 'Login' }
    }
})

export default route;

 

 

import {createRouter, createWebHistory} from 'vue-router';
import Login from "../views/Login.vue";

const route = createRouter({
    history:createWebHistory(), //url地址显示模式
    // history, 指定路由的模式, 此处默认使用的是hash模式, vue2.0版本中， mode: "history" / mode: "hash"
    //      createWebHashHistory    hash模式            ===>   http://localhost:5050/#/login
    //[常用] createWebHistory        history模式         ===>   http://localhost:5050/login
    //      createMemoryHistory     带缓存的history模式   ===>   http://localhost:5050/
    routes:[
        {
            path:"/", //组件的访问路径，必须以斜杠开头
            name:"Login", //路由别名，一般名字保持跟组件对象名一致，但是格式是字符串的
            component: Login, //组件对象，不能加引号，直接填写对象即可
        },
        {
            path: "/login",                          // 访问路径，必须以斜杠开头
            name: "myLogin",                           // 路由别名[与组件文件名同名]
            component: Login,                        // 组件对象，一个组件可以绑定多个url地址，当多个地址绑定同一个组件，别名不能重复
        },
        {
            path: "/goods",
            name: "Goods",
            component: import("../views/Goods.vue")
        },
        {
            path: "/group/api",
            name: "GroupApi",
            component: import("../views/GroupApi.vue")
        },
        {
            path: "/page/a",
            name: "PageA",
            component: import("../views/PageA.vue")
        },
        {
            path: "/page/b",
            name: "PageB",
            component: import("../views/PageB.vue")
        },
        {
            path: "/page/c",
            name: "PageC",
            component: import("../views/PageC.vue")
        },
        {
            path: "/students",
            name: "StudentList",
            component: import("../views/StudentList.vue")
        },
            {
            // path: "/students/:id/:name",
                /* 自定义了id与name两个路由参数，也叫路径参数,StudentDetail.vue这个组件中可以通过useRoute的params属性来接受
               // :变量名，表示必填参数，不限制任何类型[路由参数，也叫路径参数，StudentDetail.vue这个组件中可以通过useRoute的params属性来接收]
                 */
            // path: "/students/:id([0-9]+)/:name",  // :变量名后面跟着正则，表示必填参数，按正则匹配限制路由参数
            path: "/students/:id([0-9]+)?/:name",   // :变量名后面跟着正则，表示可选参数，按正则匹配限制路由参数
            name: "StudentDetail",
            component: import("../views/StudentDetail.vue")
        },
        {
            path: "/admin", // 作为顶级路由，务必以/开头
            name: "Admin",
            component: import("../views/admin/Main.vue"),
            children:[  // 子组件的路由列表
                {
                      meta: {authentication: true, title: "用户管理"},
                    path:"user",  // 作为子路由存在时，path绝不能以/开头！！！
                    name: "User",
                    component: import("../views/admin/User.vue")
                },
                {
                    meta: {authentication: false, title: "商品管理"},
                    path:"goods",  // 作为子路由存在时，path绝不能以/开头！！！
                    name: "AdminGoods",
                    component: import("../views/admin/Goods.vue")
                },
            ]
        },
    ]
})

/**
 * 全局前置守卫
 * 在路由跳转之前进行拦截
 */
route.beforeEach((to, from,next) => {
  // ...
  // 返回 false 以取消导航
    if(to.meta.authentication){
          console.log(to); // 表示下一个页面的路由对象
          console.log(from); // 表示当前页面的路由对象
        // //阻止页面跳转
        // return false
        // 将用户重定向到登录页面
        // return { name: 'Login' }
        return next({path:"/login"})
    }else {
        next()
    }
})

export default route;

 

 

全局后置守卫

router.afterEach((to, from) => {
  // 公共代码
});

代码：

import {createRouter, createWebHistory} from 'vue-router';
import Login from "../views/Login.vue";

const route = createRouter({
    history:createWebHistory(), //url地址显示模式
    // history, 指定路由的模式, 此处默认使用的是hash模式, vue2.0版本中， mode: "history" / mode: "hash"
    //      createWebHashHistory    hash模式            ===>   http://localhost:5050/#/login
    //[常用] createWebHistory        history模式         ===>   http://localhost:5050/login
    //      createMemoryHistory     带缓存的history模式   ===>   http://localhost:5050/
    routes:[
        {
            path:"/", //组件的访问路径，必须以斜杠开头
            name:"Login", //路由别名，一般名字保持跟组件对象名一致，但是格式是字符串的
            component: Login, //组件对象，不能加引号，直接填写对象即可
        },
        {
            path: "/login",                          // 访问路径，必须以斜杠开头
            name: "myLogin",                           // 路由别名[与组件文件名同名]
            component: Login,                        // 组件对象，一个组件可以绑定多个url地址，当多个地址绑定同一个组件，别名不能重复
        },
        {
            path: "/goods",
            name: "Goods",
            component: import("../views/Goods.vue")
        },
        {
            path: "/group/api",
            name: "GroupApi",
            component: import("../views/GroupApi.vue")
        },
        {
            path: "/page/a",
            name: "PageA",
            component: import("../views/PageA.vue")
        },
        {
            path: "/page/b",
            name: "PageB",
            component: import("../views/PageB.vue")
        },
        {
            path: "/page/c",
            name: "PageC",
            component: import("../views/PageC.vue")
        },
        {
            path: "/students",
            name: "StudentList",
            component: import("../views/StudentList.vue")
        },
            {
            // path: "/students/:id/:name",
                /* 自定义了id与name两个路由参数，也叫路径参数,StudentDetail.vue这个组件中可以通过useRoute的params属性来接受
               // :变量名，表示必填参数，不限制任何类型[路由参数，也叫路径参数，StudentDetail.vue这个组件中可以通过useRoute的params属性来接收]
                 */
            // path: "/students/:id([0-9]+)/:name",  // :变量名后面跟着正则，表示必填参数，按正则匹配限制路由参数
            path: "/students/:id([0-9]+)?/:name",   // :变量名后面跟着正则，表示可选参数，按正则匹配限制路由参数
            name: "StudentDetail",
            component: import("../views/StudentDetail.vue")
        },
        {
            path: "/admin", // 作为顶级路由，务必以/开头
            name: "Admin",
            component: import("../views/admin/Main.vue"),
            children:[  // 子组件的路由列表
                {
                      meta: {authentication: true, title: "用户管理"},
                    path:"user",  // 作为子路由存在时，path绝不能以/开头！！！
                    name: "User",
                    component: import("../views/admin/User.vue")
                },
                {
                    meta: {authentication: false, title: "商品管理"},
                    path:"goods",  // 作为子路由存在时，path绝不能以/开头！！！
                    name: "AdminGoods",
                    component: import("../views/admin/Goods.vue")
                },
            ]
        },
    ]
})

/**
 * 全局前置守卫
 * 在路由跳转之前进行拦截
 */
// route.beforeEach((to, from,next) => {
//   // ...
//   // 返回 false 以取消导航
//     if(to.meta.authentication){
//           console.log(to); // 表示下一个页面的路由对象
//           console.log(from); // 表示当前页面的路由对象
//         // //阻止页面跳转
//         // return false
//         // 将用户重定向到登录页面
//         // return { name: 'Login' }
//         return next({path:"/login"})
//     }else {
//         next()
//     }


// 全局后置守卫
// 在页面跳转之后的完成一些页面的初始化工作
route.afterEach((to, from) => {
    console.log("to=", to)       // 下一页页面的路由操作对象
    console.log("from=", from)   // 当前页面的路由对象
    document.title = to.meta.title  // 例如，把meta中的title作为页面标题进行展示
})
export default route;

 

路由独享守卫

const routes = [ // 路由列表
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: (to, from) => {
      // reject the navigation
      return false
    },
  },
]

路由，代码：

 

import {createRouter, createWebHistory} from 'vue-router';
import Login from "../views/Login.vue";

const route = createRouter({
    history:createWebHistory(), //url地址显示模式
    // history, 指定路由的模式, 此处默认使用的是hash模式, vue2.0版本中， mode: "history" / mode: "hash"
    //      createWebHashHistory    hash模式            ===>   http://localhost:5050/#/login
    //[常用] createWebHistory        history模式         ===>   http://localhost:5050/login
    //      createMemoryHistory     带缓存的history模式   ===>   http://localhost:5050/
    routes:[
        {
            path:"/", //组件的访问路径，必须以斜杠开头
            name:"Login", //路由别名，一般名字保持跟组件对象名一致，但是格式是字符串的
            component: Login, //组件对象，不能加引号，直接填写对象即可
        },
        {
            path: "/login",                          // 访问路径，必须以斜杠开头
            name: "myLogin",                           // 路由别名[与组件文件名同名]
            component: Login,                        // 组件对象，一个组件可以绑定多个url地址，当多个地址绑定同一个组件，别名不能重复
        },
        {
            path: "/goods",
            name: "Goods",
            component: import("../views/Goods.vue")
        },
        {
            path: "/group/api",
            name: "GroupApi",
            component: import("../views/GroupApi.vue")
        },
        {
            path: "/page/a",
            name: "PageA",
            component: import("../views/PageA.vue")
        },
        {
            path: "/page/b",
            name: "PageB",
            component: import("../views/PageB.vue")
        },
        {
            path: "/page/c",
            name: "PageC",
            component: import("../views/PageC.vue")
        },
        {
            path: "/students",
            name: "StudentList",
            component: import("../views/StudentList.vue")
        },
            {
            // path: "/students/:id/:name",
                /* 自定义了id与name两个路由参数，也叫路径参数,StudentDetail.vue这个组件中可以通过useRoute的params属性来接受
               // :变量名，表示必填参数，不限制任何类型[路由参数，也叫路径参数，StudentDetail.vue这个组件中可以通过useRoute的params属性来接收]
                 */
            // path: "/students/:id([0-9]+)/:name",  // :变量名后面跟着正则，表示必填参数，按正则匹配限制路由参数
            path: "/students/:id([0-9]+)?/:name",   // :变量名后面跟着正则，表示可选参数，按正则匹配限制路由参数
            name: "StudentDetail",
            component: import("../views/StudentDetail.vue")
        },
        {
            path: "/admin", // 作为顶级路由，务必以/开头
            name: "Admin",
            component: import("../views/admin/Main.vue"),
            children:[  // 子组件的路由列表
                {
                      meta: {authentication: true, title: "用户管理"},
                    path:"user",  // 作为子路由存在时，path绝不能以/开头！！！
                    name: "User",
                    component: import("../views/admin/User.vue")
                },
                {
                    meta: {authentication: false, title: "商品管理"},
                    path:"goods",  // 作为子路由存在时，path绝不能以/开头！！！
                    name: "AdminGoods",
                    component: import("../views/admin/Goods.vue")
                },
            ]
        },
        {
            path:"/list",
            name:"List",
            component: import("../views/List.vue"),
            beforeEnter: (to, from) => {
                console.log(`from===>`, from);
                console.log(`to===>`, to);
                console.log(`to===>`, to.query.id);  // 不管是from还是to，都是路由对象，都可以使用query或者params来提取路由参数
             // 返回值如果是true则表示直接允许跳转，返回false表示拦截不让页面跳转
                return true;
      },
        },
    ]
})

/**
 * 全局前置守卫
 * 在路由跳转之前进行拦截
 */
// route.beforeEach((to, from,next) => {
//   // ...
//   // 返回 false 以取消导航
//     if(to.meta.authentication){
//           console.log(to); // 表示下一个页面的路由对象
//           console.log(from); // 表示当前页面的路由对象
//         // //阻止页面跳转
//         // return false
//         // 将用户重定向到登录页面
//         // return { name: 'Login' }
//         return next({path:"/login"})
//     }else {
//         next()
//     }


// 全局后置守卫
// 在页面跳转之后的完成一些页面的初始化工作
route.afterEach((to, from) => {
    console.log("to=", to)       // 下一页页面的路由操作对象
    console.log("from=", from)   // 当前页面的路由对象
    document.title = to.meta.title  // 例如，把meta中的title作为页面标题进行展示
})
export default route;

 

 

 

 

 

 
 
 
posted @ 2025-03-14 02:26  minger_lcm  阅读(106)  评论(0)    收藏  举报