vue-router

vue-router

安装

npm install vue-router --save

使用

在src目录下新建一个router.js文件，在router.js中引入vue，在router.js中导入router模块，在vue中使用router。

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

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

在src目录下新建一个view文件，在view里面新建2个页面，Index.vue、About.vue。在main.js中写如下代码：

import router from './router'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

在router.js中把新建的页面引入

import Index from '../view/Index '
import About from '../view/About '

export default new Router({
    // 地址栏# 去掉
    mode:'history',
    routes:[
    {
        path:'/index',
        name:'Index',
        component:Index
    },
    {
        path:'/about',
        name:'About',
        component:About,
        //子路由  在谁的里面放置路由，就要在谁的下面引入
        children:[
            {
                //会员列表
                path:'/member/list',
                name:'MemberList',
                component:MemberList
            }
        ]
    }
   ]
})

最后在App.vue中写入路由的出口即可。

<router-view></router-view>