Vue-cli项目中路由的基础用法

Vue-cli项目中路由的基础用法

1. 文件目录
   
2. 编辑router文件夹下的index.js文件
   第一步：引用vue和vue-router ，Vue.use（VueRouter）

/* eslint-disable*/
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

第二步：引用定义好的路由组件

import ChildOne from '../components/childOne'
import ChildTwo from '../components/childTwo'

第三步：定义路由（路由对象包含路由名、路径、组件、参数、子路由等），每一个路由映射到一个组件
第四步：通过new Router来创建router实例

export default new Router({
    routes: [
    {
        path: '/one',
        name: 'ChildOne',
        component: ChildOne
    },
    {
        path: '/two',
        name: 'ChildTwo',
        component: ChildTwo,
        children: [
	      {
	        path: 'password',
	        name: "password",
	        meta: { title: "修改密码" },
	        component: () => import('../views/login/password')   //也可这样直接引入，找对地址
	      },
	   ]
    }
    ]
})

3. 在main.js文件上编辑
   第五步：在main.js中将路由实例挂载到vue根实例上，使得整个应用都有路由功能，如下

import router from '../src/router/index.js'
new Vue({
    el: '#app',
    router,
    components: { App },
    template: ''
})

4. 在组件文件上使用路由，编辑app.vue
   第六步：在组件中使用router-link 标签实现跳转路由（ this.$router.push({ name: “tradersedit”, });）、使用router-view来实现路由显示，如下

  

      //app.vue里面只写这个就行
  

该demo中的childOne.vue组件文件

注意：在组件中可以使用this.$router访问路由器，可以使用this.$route访问当前路由；
实现效果

childOne.vue中使用二级路由