Vue学习Day06-Vue中路由(router)的相关知识

以下是学习笔记:

1.核心插件Vue-Router的使用步骤

<div id="app">
　　<ul>
　　　　<li>
　　　　　　<!-- 入口：实际上就是一个a标签 -->
　　　　　　<router-link to="/home">首页</router-link>
　　　　</li>
　　</ul>

　　<!-- 指定路由出口 -->

　　<router-view></router-view>

</div>

<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<script>
// 路由的使用步骤：
// 1 安装: npm i -S vue-router
// 2 引入 vue-router(它必然依赖vue.js)
// 3 创建路由实例
// 4 将路由实例与vue实例关联到一起
// 5 在路由实例中配置路由规则
// 哈希值 和 组件 的对应关系
// 6 指定路由出口（ 表示将当前匹配的路由展示在页面中的哪个位置 ）
// 7 指定路由的入口

const Home = Vue.component('home', {
　　template: `
　　<h1>这是 Home 组件</h1>
　　`
})

// 创建路由实例
const router = new VueRouter({
routes: [
{ path: '/home', component: Home }
]
})

const vm = new Vue({
el: '#app',
data: {

},
// 将路由与实例关联到一起
router
})
</script>

2.路由的重定向

const router = new VueRouter({
      routes: [
        // 重定向：
        // / 是默认的路径，页面第一打开的时候，就会访问这个路径
        // 当这个路径匹配成功后，通过指定的 redirect 就可以重定向到其他路由了
        { path: '/', redirect: '/home' },
        { path: '/home', component: Home }
      ]
 })

3.路由的参数(动态路由匹配)

----路由参数的意义:

    const Stu1 = {
      template: `
        <div>
          <p>这是第一个学生 1111</p>
        </div>
      `
    }
    const Stu2 = {
      template: `
        <div>
          <p>这是第二个学生 2222</p>
        </div>
      `
    }
    const router = new VueRouter({
      routes: [
        { path: '/', redirect: '/home' },
        { path: '/home', component: Home },
        { path: '/stu/1001', component: Stu1 },
        { path: '/stu/1002', component: Stu2 },
　　　　　//如果有很多个这样的学生数据,那么路由配置起来将会非常繁琐,要定同等数量的组件(他们几乎没什么不同)和路由规则
      ]
    })

----路由参数这样使用

const Stu = {
      template: `
        <div>
          <p>这是第一个学生 {{ $route.params.id }}</p> //在组件中使用路由参数
        </div>
      `
    }

    const router = new VueRouter({
      routes: [
        { path: '/', redirect: '/home' },
        { path: '/home', component: Home },

        // :id 就是路由参数
        // 匹配的哈希值为： /stu/1001 或 /stu/1002 或 /stu/abc
        // 无法匹配的哈希值为： /stu 或 /stu/ 或 /stu/1001/ab
        { path: '/stu/:id', component: Stu },
        // { path: '/stu/1001', component: Stu1 },
        // { path: '/stu/1002', component: Stu2 },
      ]
    })

----但是当使用路由参数时,如果从/stu/1001导航到/stu/1002,原来的组件实例会被复用,相应的,组件的生命周期钩子不会再被调用.一旦有逻辑代码写在了钩子函数中,就会出现复用触发时,数据更新出问题!

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

const Stu = {
  template: '...',
  watch: {//当路由发生变化时,会触发
    $route(to, from) {
      // 对路由变化作出响应...(可以使用to.params.id获取之前没有正常更新的数据)
    }//watch之前在计算属性computed讲到过,深度监听用watch
  }
}

4.路由的嵌套

<div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/user">用户管理</router-link>

    <router-view></router-view>
</div>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>

<script>
    const Home = {
      template: `
        <h1>这是 Home 组件</h1>
      `
    }

    // 父组件：
    const User = {
      template: `
        <div class="user">
          <h2>用户中心</h2>
　　　　　　<!--子路由的入口-->　
          <router-link to="/user/profile">个人资料</router-link>
          <router-link to="/user/posts">岗位</router-link>
          <!-- 子路由展示在此处 -->
          <router-view></router-view>
        </div>
        `
    }
    // 子组件：
    const UserProfile = {
      template: '<h3>个人资料：张三</h3>'
    }
    const UserPosts = {
      template: '<h3>岗位：FE</h3>'
    }

    const router = new VueRouter({
      routes: [
        {
          path: '/home',
          component: Home
        },

        {
          path: '/user',
          component: User,
          // 子路由配置：
          children: [
            {
              // 当 /user/profile 匹配成功，
              // UserProfile 会被渲染在 User 的 <router-view> 中
              path: 'profile',
              component: UserProfile
            },
            {
              // 当 /user/posts 匹配成功
              // UserPosts 会被渲染在 User 的 <router-view> 中
              path: 'posts',
              component: UserPosts
            }
          ]
        }
      ]
    })
    const vm = new Vue({
      el: '#app',
      data: {

      },

      router
    })
  </script>

5.路由的高亮

在点击路由入口跳转链接后,vue会自动给<router-link>标签增加两个类,

router-link-active(模糊匹配)

router-link-exact-active(精确匹配:当有路由嵌套时,并点击子路由链接后.父级将会有router-link-active类,子路由则会有router-link-active和router-link-exact-active两个类,因为模糊匹配,精确匹配都满足)

如果不想在路由嵌套时,父级路由高亮,给ta添加上exact属性即可

<router-link to="/user" exact>用户管理</router-link>

另外,可以在路由实例中使用linkActiveClass属性

linkActiveClass: '类名'