路由跳转

Vue-Router的原理是通过改变URL实现页面局部刷新，相比与a标签跳转路由跳转不需要刷新整个页面

使用步骤

• 下载vue-router路由模块；

    npm install vue-router
  

• 在Vue项目引入vue-rouer

• 配置路由规则；

新建一个专用于配置路由的js文件index.js，在main.js中引入index.js

• 组件内调用

一： 使用router-view标签给vue组件的跳转提供一个容器，在script代码中确定具体跳转方式

二：使用router-link标签实现跳转（类似a标签，但却是局部刷新页面）

定义动态路由/获取参数

在定义路由规则时在path：中拼接参数

path:id

通过params获取动态路由参数

this.$route.params.id 

嵌套路由

定义

• 嵌套路由指的是路由中的路由，在一个被路由过来的页面下继续使用路由（每一个组件下都有< router-view >）
  -嵌套路由的现象： 点击了路由跳转之后父路由组件的内容一直呈现；子路由的内容进行切换，地址栏的路径也随之改变。

    const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }，
        // 当 /user/:id 匹配成功，
        // UserHome 会被渲染在 User 的 <router-view> 中
        { 
           path: '', 
           component: UserHome 
        },
         // ...其他子路由     
      ]
    }
  ]
  

  })

注意事项

• 可以通过 $route.params.id 来获取到动态路由中的参
• 以 / 开头的嵌套路径会被当作根路径
• 子路由是不能加"/"的，否则无法匹配，而是匹配到根路由
• 注意需要匹配一个空的情况，然后匹配一个default组件，避免出现空白页的问题

动态路由

路由跳转

路由懒加载

通过异步的方式来加载对应的路由组件，提高页面相应速度