vue-router

最新推荐文章于 2024-11-09 21:44:05 发布

log.error

最新推荐文章于 2024-11-09 21:44:05 发布

阅读量57

点赞数 1

分类专栏：笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_52866571/article/details/128409219

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

路由

1.理解：一个路由（route）就是一组映射关系（key-value），多个路由需要路由器（router）进行管理。

2.前端路由：key是路径，value是组件。

1.基本使用

1.安装vue-router，命令：npm i vue-router

2.应用插件：Vue.use(VueRouter)

3.编写router配置项：

//引入vue-router
import VueRouter from "vue-router"
//引入组件
import Home from "../componets/Home"
import About from "../componets/About"
export default new VueRouter({
  routes:[
    {
      //配置路径一
      path:"/home",
      component:Home
    },{
      //配置路径二
      path:"/about",
      component:About
    }
  ]
})

4.实现切换（active-class可配置高亮样式）

<router-link class="list-group-item" active-class="active" to="/home" >Home</router-link>

5.指定展示位置

<router-view></router-view>

2.几个注意点

1.路由组件通常存放在pages文件夹，一般组件通常存放在componets

文件夹。

2.通过切换，“隐藏”了的路由组件，默认是被销毁的，需要的时候再去挂载。

3.每个组件都有自己的$route属性，里面存储着自己的路由信息。

4.整个应用只有一个router，可以通过组建的$router属性获取到。

3.嵌套路由（多级路由）

1.配置路由规则，使用children配置项：

export default new VueRouter({
  routes:[
    {
      //配置路径一
      path:"/home",
      component:Home,
      children:[
        {
          path:"news",
          component:News
        },
        {
          path:"message",
          component:Message
        }
      ]
    },{
      //配置路径二
      path:"/about",
      component:About
    }
  ]
})

2.跳转（需要配置完整路径）

<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>

4.路由的query参数

1.传递参数

<!--地址携带query参数，模板字符串的写法-->
<router-link :to="`/home/message/detail?id=${msg.id}&msg=${msg.msg}`">{{msg.msg}}</router-link>
<!--地址携带query参数，对象的写法-->
<router-link :to="{
        path:'/home/message/detail',
        query:{
          id:msg.id,
          msg:msg.msg
        }}">
        {{msg.msg}}
</router-link>

2.接收参数：

this.$route.query.id
this.$route.query.msg

5.命名路由

1.作用：可以简化路由的跳转。

2.使用：

1.给路由命名：

export default new VueRouter({
  routes:[
    {
      //配置路径一
      path:"/home",
      component:Home,
      children:[
        {
          path:"news",
          component:News
        },
        {
          path:"message",
          component:Message,
          children:[
            {
              <!--将Detail路由命名为xiaoxi-->
              name:"xiaoxi",
              path:"detail",
              component:Detail
            }
          ]
        }
      ]
    },{
      //配置路径二
      path:"/about",
      component:About
    }
  ]
})

2.简化跳转：

<!--简化前，需配置完整路径-->
<router-link :to="{
        path:'/home/message/detail',
        query:{
          id:msg.id,
          msg:msg.msg
        }}">
        {{msg.msg}}
</router-link>
<!--使用后，直接通过路由名字跳转-->
<router-link :to="{
        name:'xiaoxi',
        query:{
          id:msg.id,
          msg:msg.msg
        }}">
        {{msg.msg}}
</router-link>

6.路由的params参数

1.配置路由，声明接受params参数

export default new VueRouter({
  routes:[
    {
      //配置路径一
      path:"/home",
      component:Home,
      children:[
        {
          path:"news",
          component:News
        },
        {
          path:"message",
          component:Message,
          children:[
            {
              name:"xiaoxi",
              path:"detail/:id/:msg",//使用占位符声明接受params参数
              component:Detail
            }
          ]
        }
      ]
    },{
      //配置路径二
      path:"/about",
      component:About
    }
  ]
})

2.传递参数

<!--跳转并携带params参数，字符串写法-->
<router-link :to="`/home/message/detail/${msg.id}/${msg.msg}`">{{msg.msg}}</router-link>
<!--跳转并携带params参数，对象写法-->
<router-link :to="{
        name:'xiaoxi',
        params:{
          id:msg.id,
          msg:msg.msg
        }}">
        {{msg.msg}}
</router-link>

特别注意：路由携带params参数时，若使用对象写法，则不能使用path配置项，必须使用name配置

3.接收参数

this.$route.params.id
this.$route.params.msg

7.路由的props配置

作用：让路由组件更方便的收到参数

{
    name:"xiaoxi",
    path:"datail/:id",
    componets:Detail,
    //第一种写法，向props传递对象
    //props：{a:900}
    //第二种写法：props为布尔值，布尔值为True，则把路由收到的所有params传给Detail组件
    //props:true
    //第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
    props(route){
        id:route.query.id,
        msg:route.query.title
    }
}

8.`<router-link>`的replace属性

1.作用：控制路由跳转时操作浏览器记录的模式

2.浏览器的历史记录有两种写入方式：分别为push和replace，push是追加记录，replace是替换当前记录。路由跳转时，默认为push

3.如何开启replace模式：<router-link replace ..... ></router-link>

9.编程式路由导航

1.作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活

2.具体使用

//$router的两个api
this.$router.push({
    name:'xiaoxi',
    params:{
        id:msg.id,
        msg:msg.msg
    }
})
this.$router.replace({
    name:'xiaoxi',
    params:{
        id:msg.id,
        msg:msg.msg
    }
})
this.$router.forward() //前进一页
this.$router.back() //后退一页
this.$router.go(3) //表示前进三页

10.缓存路由组件

1.作用：让不展示的路由组件保持挂载，不被销毁。

2.具体使用：

<keep-alive include="News"> //指定不会被销毁的组件
     <router-view></router-view>
</keep-alive>

11.路由重定向

1.作用：可以通过重定向实现一种效果，即当浏览器没有任何 #锚点信息时，默认也给显示一个组件。

2.使用

export default new VueRouter({
  routes:[
    {
      //配置路径一
      path:"/home",
      component:Home,
      children:[
        {
          path:"news",
          component:News
        },
        {
          path:"message",
          component:Message,
          children:[
            {
              name:"xiaoxi",
              path:"detail/:id/:msg",
              component:Detail
            }
          ]
        }
      ]
    },{
      //配置路径二
      path:"/about",
      component:About
    },{
      path:"/",
      redirect:"/home" // 路由重定向
    }
  ]
})

12.两个新的生命周期函数

1.作用：路由组件所独有的两个函数，用于捕获路由组件的激活状态

2.具体名字：

1.activated路由组件被激活时触发。

2.deactivated路由组件失活时激发。

13.路由守卫

1.作用：对路由进行权限控制

2.分类：全局守卫，独享守卫，组件内守卫

3.全局守卫：

// 全局前置守卫,切换路由前执行
router.beforeEach((to, from, next) => {
  if (to.meta.isAuth) {
    if (localStorage.getItem('school') === '河北地质大学') {
      next()
    } else {
      alert('权限不足')
    }
  } else {
    next()
  }
})
// 全局后置守卫，切换路由后执行
router.afterEach((to, from) => {
  document.title = to.meta.title
})

4.独享路由守卫

beforeEnter: (to, from, next) => {
            if (to.meta.isAuth) {
              if (localStorage.getItem('school') === '河北地质大学1') {
                next()
              } else {
                alert('权限不足')
              }
            } else {
              next()
            }
          }

5.组件内路由守卫

//路由进入前调用
  beforeRouteEnter(to,from,next){
    next()
  }
  //路由离开前调用
  ,beforeRouteLeave (to, from, next) {
    next()
  }

14.路由器的两种工作模式

1.hash值是url地址中#及其后面的内容

2.hash值不会包含在HTTP请求中，即：hash值不会带给服务器。

3.hash模式：

1.地址中永远带着#号，不美观。

2.若以后地址通过第三方手机app分享，若app校验严格，会被标记为不合法地址

3.兼容性较好

4.history模式：

1.地址干净，美观

2.兼容性较hash模式略差

3.应用部署后需要后端人员支持，解决路由刷新后404问题