新建Vue工程中对路由使用vue-router

首先在搭建的工程中安装，并保存在package.json文件中，必须添加--save。 npm install vue-router --save
router文件夹里面index.js、router.js

1、生成路由
在index.js文件中引入路由，生成路由

1 import Vue from 'vue'
2 import VueRouter from 'vue-router'
3 
4 Vue.use(VueRouter)
5 //生成路由器
6 const router = new VueRouter()
7 
8 export default router

2、安装路由到当前应用，在main.js文件
new Vue({router})

main.js文件

 1 import Vue from 'vue'
 2 import 'lib-flexible/flexible'
 3 import router form './router
 4 import App from './App.vue'
 5 
 6 Vue.config.productionTip = false
 7 
 8 new Vue({
 9 　　el:'#app,
10 　　compontents:{APP},
11 　　template:'<APP/>,
12 　　router
13 })

3、管理路由
new VueRouter({routes},routes = [{path:'路由路径',compontent:'路由组件'}]

routes.js文件

 1 //引入组件
 2 import Login from '@/view/login/index'
 3 import Msite from '@/view/msite/index'
 4 export default [
 5 //{path:'路由路径',component:'路由组件'}
 6 　　{
 7 　　　　path:'/login',
 8 　　　　component:Login
 9 　　},
10 　　{
11 　　　　path:'/msite',
12 　　　　component:Msite
13 　　},
14 ]

路由重定向

 1 import Login from '@/view/login/index'
 2 import Msite from '@/view/msite/index'
 3 
 4 export const defalutRouter = [
 5     {
 6         path:'/login',
 7         component:Login
 8     },
 9     {
10         path:'/msite',
11         component:Msite
12     },
13     {
14         path:'/',
15         rediret:'/login'
16     },
17 ]

4、请求路由
路由链接router-link to = '路由路径'

引入路由，将路由对象配置
index.js文件

 1 import Vue from 'vue'
 2 import VueRouter from 'vue-router'
 3 import routes from './routes'
 4 
 5 Vue.use(VueRouter)
 6 //生成路由器
 7 const router = new VueRouter(
 8 {routes}
 9 )
10 
11 export default router

5、显示路由组件 APP.vue文件里面添加 <router-view></router-view>