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

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

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

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
//生成路由器
const router = new VueRouter()

export default router

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

main.js文件

import Vue from 'vue'
import 'lib-flexible/flexible'
import router form './router
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
　　el:'#app,
　　compontents:{APP},
　　template:'<APP/>,
　　router
})

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

routes.js文件

//引入组件
import Login from '@/view/login/index'
import Msite from '@/view/msite/index'
export default [
//{path:'路由路径',component:'路由组件'}
　　{
　　　　path:'/login',
　　　　component:Login
　　},
　　{
　　　　path:'/msite',
　　　　component:Msite
　　},
]

路由重定向

 

import Login from '@/view/login/index'
import Msite from '@/view/msite/index'

export const defalutRouter = [
    {
        path:'/login',
        component:Login
    },
    {
        path:'/msite',
        component:Msite
    },
    {
        path:'/',
        rediret:'/login'
    },
]

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

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

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)
//生成路由器
const router = new VueRouter(
{routes}
)

export default router

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