路由

2019-01-04 本文已影响0人 cj_jax

认识路由

什么是路由

路由是一套完成映射规则

路由的基本使用

使用的步骤

1.首先引入vue-router.js文件记住，先引入vue.js文件

2.然后创建两个组件，分别用const 接收一下，否则无法绑定到路由上

3.在组件中写好模板内容

4.在#app内创建路由的入口和路由的出口路由入口的作用？和路由出口的作用

5.创建路由设置配置项 moutes

6.配置项是数组，每个配置项是一个对象，对象中有两个属性，path和component

7.在vue的实例中绑定路由（很重要）

//html
<div id="app">
    <!-- 指定路由入口： -->
    <ul>
        <!-- to属性 和 路由规则中的 path 相匹配 -->
        <li><router-link to="/home">首页</router-link></li>
        <li><router-link to="/about">关于</router-link></li>
    </ul>

    <!-- 指定路由出口： -->
    <router-view></router-view>
</div>

//js
 // 注册home组件
      const Home = Vue.component('home', {
        template: `
          <div>这是 Home 组件</div>
        `
      })
      // 快速简洁的注册组件：
      const About = {
        template: `
          <h2>这是 About 组件</h2>
        `
      }
      const router = new VueRouter({
        // 通过该配置配置路由规则
        routes: [
          // 每一个路由规则都是一个对象
          // path 表示路由规则的路径，不要带有#
          // component 用来指定展示的内容，是一个组件
          { path: '/home', component: Home },
          { path: '/about', component: About }
        ]
      })
      const vm = new Vue({
        el: '#app',
        data: {},
        // 将路由实例与Vue实例关联到一起
        router
      })

部分参数说明：

1.router-link

路由的入口函数，

2.router-link 中的to

to属性的作用：o属性和路由规则中的 path 相匹配

3.router-view

路由的出口函数，作用是是将对应的功能渲染在这个位置中

4.routes中的配置项 path和 component

path 表示路由规则的路径，不要带有#

component 用来指定展示的内容，是一个组件

5.路由中的默认路由：/ 和路由的重定向属性

默认路由： /

路由的重定向：redirect : '/home'

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

6.精确匹配 exact

用于精确匹配路由，添加类名，对于路由的选择没有影响

默认，没有 exact 属性的时候，高亮类名添加的方式是模糊匹配，只要哈希值中包含了 to 属性的值，那么，这个 router-link 就会被添加高亮类名

注意：精确匹配和模糊匹配只对添加样式名称有效，对路由的匹配规则无效！！！

7.路由参数

采用动态路由匹配符合条件的哈希值

例如匹配项为： /news/：id

 { path: '/news/:id', component: NewsInfo }

能够匹配的哈希值为：

/news/1 或 /news/2 或 /news/abc

不能匹配的哈希值为：

/abc 或 /news 或 /news/1/a

路由的高亮效果

实现的原理：router-link 会给当前匹配的导航菜单（路由入口）添加高亮的类名，如果要使用第三方的样式库（比如：bootstrp），此时，可以在路由中添加 linkActiveClass 配置项，来将默认的高亮类名修改为样式库中对应的高亮类名，这样，路由就可以配合样式库来使用了

自定义高亮类名：

linkActiveClass: 'itcast',

linkExactActiveClass: 'my-itcast'

js中获取路由的参数

当/new/1切换到/new/2的时候，渲染同一个组件，vue就会复用这个组件，这样做的目的是性能更高。

缺点：由于第一次渲染的时候钩子函数会执行，通过地址栏的切换，vue复用组件不会再次执行created()钩子函数

解决的方法：使用watch监听路由的变化

$route(to, from) {
    console.log('路由参数为：', to.params.id)
 }

补充说明：

例如：/new/1切换到/new/2

to指的是： /new/2

from指的是：/new/1

to.params.id指的是获取到的路由的参数

应用场景：

需要根据路由的参数，渲染对应的内容

路由