Vue笔记(十四) vue-router基本路由

Vue-router

1) 官方提供的用来实现 SPA 的 vue 插件
2) github: https://github.com/vuejs/vue-router
3) 中文文档: http://router.vuejs.org/zh-cn/
4) 下载: npm install vue-router --save

相关 API

1) VueRouter(): 用于创建路由器的构建函数

new VueRouter({
 // 多个配置项
})

2) 路由配置

routes: [
{ // 一般路由
path: '/about',
component: About
},{
// 自动跳转路由
path: '/',
redirect: '/about'
}]

3) 注册路由器

import router from './router'
new Vue({
    router
})

4) 使用路由组件标签

1. <router-link>: 用来生成路由链接
<router-link to="/xxx">Go to XXX</router-link>

2. <router-view>: 用来显示当前路由组件界面
<router-view>
</router-view>

 

基本路由 

路由组件
Home.vue
About.vue

应用组件

App.vue

<div>
 <!--路由链接-->
 <router-link to="/about">About</router-link>
 <router-link to="/home">Home</router-link>
 <!--用于渲染当前路由组件-->
 <router-view></router-view>
</div>

 src/router/index.js

export default new VueRouter({
  routes: [{
    path: '/',
    redirect: '/about'
  }, {
    path: '/about',
    component: About
  }, {
    path: '/home',
    component: Home
  }]
})

main.js

import Vue from 'vue'
import router from './router'
// 创建 vue 配置路由器 
new Vue({
  el: '#app',
  router,
  render: h => h(app)
})

优化路由器配置 linkActiveClass: 'active', // 指定选中的路由链接的 class

 

编写使用路由的 3 步

1) 定义路由组件
2) 注册路由
3) 使用路由
 <router-link> <router-view>