Vue学习笔记[13]-使用vue-router

在使用vue cli创建项目时可以添加vue-router,或使用npm安装vue-router

配置路由跳转:

// ./src/router/index.js
//1. 导入
import Vue from 'vue'
import VueRouter from 'vue-router'
//导入组件
import Home from '../components/Home'
import About from '../components/About'
//安装Vue-router
Vue.use(VueRouter)
//在路由对象中配置路由
const routes = [
  {
    path:'/home',
    component: Home
  },

  {
    path:'/about',
    component:About
  }
]
//全局路由控制器
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

//4. 导出全局路由控制器并使用
export default router

//./src/main.js
// 导入全局控制器
import router form './router'
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

//导入文件夹会自动查找index.js

实践使用：

1. 创建路由组件：

在components文件夹下创建组件并导出

2. 配置路由映射

在router文件夹下的index.js导入组件并配置路的关系

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home'
import About from '../components/About'
Vue.use(VueRouter)

const routes = [
  {
    path:'/home',
    component: Home
  },

  {
    path:'/about',
    component:About
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

3. 在所需位置通过和使用路由

//app.vue

和

激活时的class：

当处于激活状态时，会对渲染出来的替换的标签添加class=“router-link-exact-active router-link-active”属性，可在