Vue之 vue-router

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

Vue之 vue-router

2023-04-14 17:54:09 来源：博客园

【资料图】

简介
安装vue-router
使用vue-router
router的方法
路由跳转
- 方法一使用js控制
- 方法二使用标签控制
- 路由跳转携带参数
  - 方法一使用问号携带
  - 方法二使用斜杠分隔符携带
  - 方法三使用对象的方式跳转
  - 方法四标签方式跳转携带参数
router与route的区别
多级路由
路由守卫
- 全局路由守卫
  - 前置路由守卫配置
  - 后置路由守卫配置
- 独享守卫
- 组件内守卫

简介

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue-router是基于路由和组件的，路由用户设定访问路径的，将路径和组件映射起来。在vue-router的单页面应用中，页面的路径的改变就是组件的切换。官网地址：https://router.vuejs.org/zh/

安装vue-router

# 可以在创建项目时就直接安装好vue-router# 也可以单独安装，使用下面的命令npm install vue-router# 第二步：在main.js中引入import router from "./router"new Vue({  router,    # 添加这一行  store,  render: h => h(App)}).$mount("#app")

使用vue-router

配置路由的跳转，只需要在src/router/index.js目录下导入组件之后，再

import IndexView from "@/views/IndexView";   // 创建好组件之后，导入组件const routes = [    {        path: "/index/",       // 浏览器的路由        name: "index",         // 别名        component: IndexView   // 对应的是哪个组件    },]

router的方法

this.$router.push(path)    // 相当于点击路由链接(可以返回到当前路由界面)this.$router.replace(path) // 用新路由替换当前路由(不可以返回到当前路由界面)this.$router.back()        // 请求(返回)上一个记录路由this.$router.go(-1)        // 请求(返回)上一个记录路由this.$router.go(1)         // 请求下一个记录路由this.$router.forward()     // 前进

路由跳转
方法一使用js控制

使用给按钮绑定事件的方式进行跳转

<script>export default {  name: "HomeView",  methods:{    goToLogin(){      this.$router.push("/Index")   // 这样点击上面的按钮后就会跳转到index页面了    }  }}</script>

方法二使用标签控制

使用标签的方法进行跳转

xxx

路由跳转携带参数

方法一使用问号携带

或

通过打印console.log(this.$route)发现，数据在query中
所以如果要取数据，可以直接使用query对象取

<script>export default {  name: "IndexView",  created() {    console.log("route:", this.$route.query.pk)  }}</script>

方法二使用斜杠分隔符携带

第一步配置router目录下index.js

{    path: "/index/:pk",    // 这里配置什么参数，前台传入的值对应的Key就是什么    name: "index",    component: IndexView},

第二步配置跳转功能

第三步取值根据console.log(this.$route)可以看到，值在params中

console.log(this.$route.params.pk)   // 这样就可以取到值了

方法三使用对象的方式跳转

可以直接在push方法中携带参数

<script>export default {  name: "HomeView",  methods:{    clickFunc(){      this.$router.push({        name: "index",        // 这里的name就是router/index.js中路由配置的name别名，这个路由不需要作变化        query:{               // 可以将内容放到query中          name: "jack",          age: "18"        },        params:{              // 可以将内容放到params中，这样路由中需要配置为path: "/index/:pk"          pk: "16",        }      })    }  }}</script>

可以看到，使用问题携带参数的截图
可以看到，使用斜杠分隔携带参数的截图

方法四标签方式跳转携带参数

{path: "/index/:pk",    // 这里配置了:pk    name: "index",        component: IndexView},

<script>export default {  name: "HomeView",  data() {    return {      obj: {        name: "index",        query: {id: "99"},        params: {pk: "100"}      }    }  }}</script>

返回结果如下显示

router与route的区别

route     # 当前页面的对象，也可以说是当前路由对象router    # new VueRouter对象，也是就是vue-router的实例

我们可以使用console.log查看一下这两个对象分别是什么
可以看到route对应的就是当前页面的一些信息
router中对应的就是vue-router实例

多级路由

routes:[    {        path: "/about",        component: About,    },    {        path: "/home",        component: Home,        children: [ //通过children配置子级路由            {                path: "news", //此处一定不要写：/news 注意这个斜杠                component: News            },            {                path: "message",//此处一定不要写：/message 注意这个斜杠                component: Message            }        ]    }]// 跳转< router - linkto = "/home/news" > News < /router-link>

{        path: "/demo",        component: Demo,        children: [            {                path: "test",                component: Test,                children: [                    {                        name: "hello"     // 给路由定义别名                        path: "welcome",                        component: Hello,                    }                ]            }        ]    }

跳转跳转跳转

路由守卫

对路由进行权限控制，按分类分为：全局守卫(最常用)，独享守卫，组件内守卫

全局路由守卫

前置路由守卫：在进路由前，执行代码。
后置路由守卫：路由跳转走，执行代码。

前置路由守卫配置

只需要在router/index.js文件中新增一个函数即可

router.beforeEach(    (to, from, next) => {        console.log(to, from, next)        // to 代表要去的路由        // from 代表从哪个路由跳转过来        // next 是一个函数，需要加括号执行，没有next则不会跳转到要去的路由        // 下面写一个简单的路由守卫功能        if (to.name == "index"){            console.log("成功访问index界面")            next()  // 这里不加next()是不会跳转的        }else{            alert("您不允许访问这个页面")        }    })

访问index页面可以访问
访问home页面无法访问，先是弹窗，之后因为没有next()所以也不会跳转到home路由中

后置路由守卫配置

与前置不同的只是函数名不同，用得很少

router.afterEach((to, from)=> {函数内容})

独享守卫

// 该文件专门用于创建整个应用的路由器import VueRouter from "vue-router"//引入组件import About from "../pages/About"import Home from "../pages/Home"import News from "../pages/News"import Message from "../pages/Message"import Detail from "../pages/Detail"//创建并暴露一个路由器const router =  new VueRouter({    routes:[        {            name:"guanyu",            path:"/about",            component:About,            meta:{title:"关于"}        },        {            name:"zhuye",            path:"/home",            component:Home,            meta:{title:"主页"},            children:[                {                    name:"xinwen",                    path:"news",                    component:News,                    meta:{isAuth:true,title:"新闻"},                    beforeEnter: (to, from, next) => {                        console.log("独享路由守卫",to,from)                        if(to.meta.isAuth){ //判断是否需要鉴权                            if(localStorage.getItem("name")==="lqz"){                                next()                            }else{                                alert("名不对，无权限查看！")                            }                        }else{                            next()                        }                    }                },                {                    name:"xiaoxi",                    path:"message",                    component:Message,                    meta:{isAuth:true,title:"消息"},                    children:[                        {                            name:"xiangqing",                            path:"detail",                            component:Detail,                            meta:{isAuth:true,title:"详情"},                        }                    ]                }            ]        }    ]})export default router

组件内守卫

//进入守卫：通过路由规则，进入该组件时被调用beforeRouteEnter (to, from, next) {},//离开守卫：通过路由规则，离开该组件时被调用beforeRouteLeave (to, from, next) {}//通过路由规则，进入该组件时被调用    beforeRouteEnter (to, from, next) {        console.log("About--beforeRouteEnter",to,from)        if(to.meta.isAuth){ //判断是否需要鉴权            if(localStorage.getItem("school")==="atguigu"){                next()            }else{                alert("学校名不对，无权限查看！")            }        }else{            next()        }    },    //通过路由规则，离开该组件时被调用    beforeRouteLeave (to, from, next) {        console.log("About--beforeRouteLeave",to,from)        next()    }

关键词：

Vue之 vue-router

简介

安装vue-router

使用vue-router

router的方法

路由跳转

方法一 使用js控制

方法二 使用标签控制

路由跳转携带参数

方法一 使用问号携带

方法二 使用斜杠分隔符携带

方法三 使用对象的方式跳转

方法四 标签方式跳转携带参数

router与route的区别

多级路由

路由守卫

全局路由守卫

前置路由守卫配置

后置路由守卫配置

独享守卫

组件内守卫

方法一使用js控制

方法二使用标签控制

方法一使用问号携带

方法二使用斜杠分隔符携带

方法三使用对象的方式跳转

方法四标签方式跳转携带参数