Vue-cli實戰項目3 vue-router的安裝和基本使用

安裝

第一步

npm install vue-router --save

第二步
src目錄下新建router.js

import Vue from "vue"
import Router from "vue-router"

Vue.use(Router)

export default new Router({
	routes:[]
})

第三步
在main.js中引入router.js

使用

1、添加頁面views/layout.vue

2、router.js中添加路由配置

3、添加到路由到App.js
添
4、訪問項目

添加子頁面

1、添加頁面index/index.vue

2、配置router.js

3、layout.vue添加

<router-view></router-view>

完整router.js

import Vue from "vue"
import Router from "vue-router"

import layout from "./views/layout.vue"

Vue.use(Router)

export default new Router({
	routes:[
		{
			path: '/',
			name: 'layout',
			component: layout,
			children:[
				{
					path: '/index',
					name: 'index',
					component: ()=>import('./views/index/index.vue')
				}
			]
		},
		{
			path: '/login',
			name: 'login',
			component: ()=>import('./views/login/index.vue')
		}
	]
})