Vue-router（2）之简单路由

在 vue 中使用 vue-router

 　　1、安装导入并注册路由模块：

• 运行 npm i vue-router -S 安装路由模块

• 在 index.js 中导入并注册路由模块

// 导入路由模块
import VueRouter from 'vue-router'
// 注册路由模块
Vue.use(VueRouter)

　　2、在vue文件创建路由链接：

<!-- router-link 就是 第一步，创建 路由的 hash 链接的 -->
<!-- to 属性，表示 点击此链接，要跳转到哪个 hash 地址， 注意：to 属性中，大家不需要以 # 开头 -->
<router-link to="/home">首页</router-link>
<router-link to="/movie">电影</router-link>
<router-link to="/about">关于</router-link>

　　3、创建并在 src/index.js 中导入路由相关的组件

import Home from './components/Home.vue'
import Movie from './components/Movie.vue'
import About from './components/About.vue'

　　4、创建路由规则

// 创建路由规则（对应关系）
const router = new VueRouter({ // 配置对象中，要提供 hash 地址 到 组件之间的 对应关系
  routes: [ // 这个 routes 就是 路由 规则 的数组，里面要放很多的对应关系
    // { path: 'hash地址', component: 配置对象 }
    { path: '/home', component: Home },
    { path: '/movie', component: Movie },
    { path: '/about', component: About }
  ]
})

// 创建的 router 对象，千万要记得，挂载到 vm 实例上
const vm = new Vue({
  el: '#app',
  render: c => c(App),
  router // 把 创建的路由对象，一定要挂载到 VM 实例上，否则路由不会生效
})

　　5、在页面上放路由容器

<!-- 这是路由的容器，将来，通过路由规则，匹配到的组件，都会被展示到这个 容器中 -->
<router-view></router-view>

路由规则的匹配过程

1. 用户点击 页面的 路由链接router-link，点击的一瞬间，就会修改 浏览器 地址栏 中的 Hash 地址；

2. 当 hash 地址被修改以后，会立即被 vue-router 监听到，然后进行 路由规则的 匹配；最终，找到 要显示的组件；

3. 当 路由规则匹配成功以后，就找到了 要显示的 组件，然后 把 这个组件，替换到 页面 指定的 路由容器router-view 中

设置路由高亮的两种方式和重定向

1. 通过路由默认提供的router-link-active, 为这个类添加自己的高亮样式即可；

2. 通过路由构造函数，在传递路由配置对象的时候，提供 linkActiveClass 属性，来覆盖默认的高亮类样式；

　　在index.js中，与routes平级：

// 3. 创建路由对象   前端路由： hash 值 到 组件的对应关系； 一个 hash 对应一个要展示的组件
const router = new VueRouter({
  // routes 是 路由规则数组，其中的每个对象，都是一条路由规则：
  // 路由规则的基本组成部分：  { path: 'hash值', component: 要展示的组件 }
  routes: [
    // 通过 redirect 属性，可以实现前端路由的重定向；
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { path: '/movie', component: Movie },
    { path: '/about', component: About }
  ],
  linkActiveClass: 'my-active' // 被激活的路由的类名， 默认类名为 router-link-active
})

案例实现

src/index.js

import Vue from 'vue'

// 1. 导入路由包，并得到 路由的构造函数
import VueRouter from 'vue-router'
// 2. 把 路由 安装到 Vue 上
Vue.use(VueRouter)

// 导入需要使用路由切换的组件
import Home from './Home.vue'
import Movie from './Movie.vue'
import About from './About.vue'

// 3. 创建路由对象   前端路由： hash 值 到 组件的对应关系； 一个 hash 对应一个要展示的组件
const router = new VueRouter({
  // routes 是 路由规则数组，其中的每个对象，都是一条路由规则：
  // 路由规则的基本组成部分：  { path: 'hash值', component: 要展示的组件 }
  routes: [
    // 通过 redirect 属性，可以实现前端路由的重定向；
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { path: '/movie', component: Movie },
    { path: '/about', component: About }
  ],
  linkActiveClass: 'my-active' // 被激活的路由的类名， 默认类名为 router-link-active
})

// 导入根组件
import app from './app.vue'
const vm = new Vue({
  el: '#app',
  render: c => c(app),
  router // 4. 把路由对象，挂载到VM上
})

app.vue

<template>
  <div>
    <h1>App根组件</h1>

    <!-- 记住：router-link 标签，将来会被 默认 渲染为 a 链接 -->
    <!-- to 属性，表示 点击这个链接，要跳转到哪个 hash 值 -->
    <router-link to="/home">首页</router-link>
    <router-link to="/movie">电影</router-link>
    <router-link to="/about">关于</router-link>

    <!-- 这是一个占位符，将来，通过路由规则，匹配到的组件，会被替换到 router-view 所在的位置 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.router-link-active {
  color: red;
}

.my-active {
  color: red;
  font-weight: bold;
}
</style>