VueRouter的使用
路由的使用时一个模式化的过程
script中引入的js
1 引入js
<script src="vue-router.js">
2 创建routes配置数组
const routes = [
{
path: '/',
name: 'index',
component: 组件
}
]
3 把routes放在new VueRouter中
const router = new VueRouter({
routes
})
4 将router放入到new Vue中
new Vue({
router,
el: '#app'
})
5 给挂载点添加一个router-view
<div id="app">
<router-view></router-view>
</div>
vuecli使用
1 在src中新建router文件夹并新建index.js
index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
}
]
const router = new VueRouter({
routes
})
export default router
2 在main.js中引入router
import router from './router/index'
3 在main.js里的new Vue中写入router
new Vue({
router,
...
})
4 重置app.vue
删除helloword的引入过程,删除组件模板中的内容,在div#app中加入router-view组件
注意
尽可能单独创建文件夹views(pages),存放路由组件