首先路由的使用分为三步
1.定义路由组件
2.注册路由：把路由组件映射为路由
3.使用路由
生成路由链接:
<router-link>
显示当前路由组件界面:
<router-view>
注册路由器 main.js
import Vue from 'vue'
import router from './router'
// 创建 vue 配置路由器
new Vue({
el: '#app',
router,
render: h => h(app)
})
路由模块 src/router/index.js
import Vue from 'vue';//导入vue
import VueRouter from 'vue-router';//导入vue-router插件
import About from '../views/About.vue';//导入要映射的路由组件
import Home from '../views/Home.vue';
Vue.use(VueRouter);//使用路由插件
export default new VueRouter({
routes: [
{
path: '/',
redirect: '/about'
},
{
path: '/about',
component: About
},
{
path: '/home',
component: Home
}
]
})
应用路由组件 App.vue
<div>
<!--路由链接-->
<router-link to="/about">About</router-link>
<router-link to="/home">Home</router-link>
<!--用于渲染当前路由组件-->
<router-view></router-view>
</div>
