Vue Router(二)

1、动态路由

router/index.js 中，有如下路由

{
  path: '/user/:userId',
  component: User
}

App.vue中

<router-link :to="'/user/'+userId" tag="button">用户</router-link>

在User组件中，想要获取到传来的路由参数

export default {
  name: "User",
  computed:{
    userId(){
        //this.$route 指的是当前正在活跃的路由
      return this.$route.params.userId
    }
  }
}

2、认识路由的懒加载

1、什么是路由懒加载？

当打包构建应用时，JavaScript包会变得非常大，影响页面加载

如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了

2、解释

3、路由懒加载做了些什么

路由懒加载的主要作用是将路由对应的组件打包成一个个的js代码块

只有在这个路由被访问的时候，才加载对应的组件

4、路由懒加载的效果

路由懒加载对应的组件会单独打包成一个js

5、懒加载的方式

const Home = ()=> import('../components/Home')

3、路由的嵌套

1、认识嵌套路由

嵌套路由是一个很常见的功能

比如在home页面中，我们希望通过 /home/news 和 /home/message访问一些内容

一个路径映射一个组件，访问这两个路径也会分别渲染两个组件

路径和组件的关系如下

2、实现路由嵌套

1)创建子组件

2)在router/index.js中，导入组件并配置子组件的路径

//路由懒加载
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')

4、路由的参数传递

传递参数主要有两种类型： params和query

1、params的类型 (就是我们前面说的动态路由)

2、query类型：

1)传递参数

<router-link :to="{
  path: '/profile',
  query:{  //路由传递的参数
    name: 'houchen',
    age: 18,
    height: 1.88
  }
}" tag="button">档案</router-link>

2)取出参数

在profile组件中，通过$route.query取出路由传递的参数

$router 和 $route的区别

$router： 整个路由对象

$route:当前活跃的路由

5、导航守卫

【案例】 实现导航栏的title随着组件的跳转而变换

在 router/index 路径匹配上加上meta信息

{
  path: '/about',
  component: About,
  meta:{
    title: "关于"
  }
}

全局守卫

//全局守卫
// to: 即将要进入的目标的路由对象
// from：当前导航即将要离开的路由对象  
// next() : 调用该方法后才能进入下一个钩子
router.beforeEach((to,from,next) =>{
  console.log(to)
  document.title = to.matched[0].meta.title;
  next()
})

实现效果

导航守卫的补充：

路由独享的守卫：

6、vue-router-keep-alive及其他问题

keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，避免重新渲染

router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存

keep-alive有两个非常重要的属性

include - 字符串或正则表达式，只有匹配的组件会被缓存

exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存