vue路由的使用讲解（代码实例）

1. 引入vue和vue-router

安装vue-router: npm i -S vue-router

<!-- 引入 vue.js -->
  <script src="./vue.js"></script>

<!-- 引入 vue-router.js , 注意：vue-router 是vue的插件， 所以，在使用路由之前先引入vue.js-->
  <script src="./node_modules/vue-router/dist/vue-router.js"></script>

2. 创建两个组件

var Home = {
      template: '<h1>首页</h1>'
    }
var Vip = {
  template: '<h1>会员</h1>'
}

3. 配置路由规则(创建路由实例)

    var router = new VueRouter({
      // 通过 routes 配置项来配置路由
      routes: [
        { path: '/home', component: Home },
        { path: '/vip', component: Vip },
      ]
    })

4. 路由实例与Vue实例关联

// 是Vue配置项
router: router

5. 链接导航

<!-- router-link 组件是由 vue-router 库提供的, 将来这个组件会被编译为 a标签 -->
<!-- to 属性的值, 与 路由实例中 的path 属性相匹配 -->
<router-link to="/home">首页</router-link>
<router-link to="/vip">会员</router-link>

6. 路由出口

<!-- 通过 router-view 组件, 来指定路由内容展示在页面中的位置 -->
<router-view></router-view>

7. 路由重定向

// 路由配置中添加配置(默认首页)
{ path: '/', redirect: '/home' },

导航高亮

<style>
    .router-link-exact-active, .router-link-active {
      color: red;
      font-size: 30px;
    }
</style>

路由参数

设置带参数路由

// 匹配/home/XXX
{ path: '/home/:参数名', component: Home }

// 带查询参数和哈希值
<router-link to="/user/xxx?age=18&gender=female#a=b">小红</router-link>

获取参数

$route.params.id
//也可以通过 $route.query 获取到 URL 中的查询参数
// 通过$route.hash 获取URL中的哈希值

监视路由

// 为了监视到路由参数的变化，通过 watch 监视$route
      watch: {
        $route(to, from) {
          //  对路由变化作出响应...

          // to 或 from 是匹配的路由对象，对象中包含了参数信息等
          console.log(from); // 前一路由信息（对象）
          console.log(to.params.name); // 当前路由参数值
        }
      }

嵌套路由

var router = new VueRouter({
      routes: [{
        path: '/user',
        component: User,

        // 子路由规则
        children: [
          {
            path: 'profile',
            component: UserProfile
          },
          {
            path: 'posts',

             // 如果子路由的path中添加了/，那么路由对应的路径就变为：绝对路径了，将来这个path就不会再与 /user 拼接到一起，
            // 直接在 浏览器地址栏中访问 #/posts 就可以了
            // path: '/posts',
            component: UserPosts
          }
        ]
      }]
    })

说明：

子路由的链接和出口放到父路由组件模板中