vue渐进式框架-路由详解

---

一、嵌套路由

{
      path: '/film',
      component: Film,
      children: [
        // 当前这个规则的路由是 /film/hot
        // 当url=/film/hot时，路由会在Film组件中寻找一个名字叫default的容器来承载HotFilm
        { path: 'hot', component:  HotFilm}
     ]
}

二、路由重定向

重定向规则，一般放在所有路由规则的最后面：

 { path: '/*', redirect: '/home' }

三、路由命名与别名

{ path: '/home', component: Home, alias: '/h', name: 'ho' }

重定向使用时：

{ path: '/*', redirect: {name: 'ho'}}

router-link使用时：

<router-link :to='{name:"ho"}' tag='span' exact-active-class='on'>首页</router-link>

四、动态路由与路由传参

	// :id表示动态路由参数，:time支持多个动态路由参数
    // 在路由跳转时，动态传递参数，在Detail页面使用 this.$route.params 来接收
    // 在Detail页面中，还可以使用props选项来接收，但在路由匹配规则中必须添加`props:true`
    { path: '/detail/:id/:time', component: Detail, props: true },

五、路由懒加载

路由懒加载，作用是提高应用程序启动时速度，组件按需加载

 const Home = ()=>import('./pages/Home.vue')

六、两种路由模式的对比

区别1：hash模式在url中有一个很难看的#，history没有 区别2：hash模式使用location来实现，history模式使用history.pushState来实现的 区别3：hash模块打包上线后，没有任何问题；但是history模块打包上线，刷新页面会出现404，需要在后端服务上做重定向处理。 mode: 'history', mode: 'hash',

七、vue-router提供的内置Api

router-link

该组件的作用是，触发浏览器url的变化，它相当于我们的a标签
<!-- to指定要去到哪个路径 -->
<!-- tag指定router-link最终被浏览器渲染成什么标签，默认是a标签 -->
<!-- exact-active-class指定当前url匹配成功的高亮样式，并且是精准匹配 -->

vue-router

路由容器：当url匹配成功，在这里显示当前url所对应的组件
命名视图，它的名字叫 abc 
<router-view name='abc'></router-view>

this.$route 记录的是URL的信息数据 this.$router 是编程式路由的api函数