vue中的路由配置（逆战班）

一.首先安装Vue CLI后，在脚手架文件夹view或components下创建组件，接着在router文件夹的index.js中进行配置

1.import ‘自定义组件名’ from ‘组件路径’，引入组件
比如 import maps from '@/views/maps.vue'（@代表src根目录）

2.然后为每个组件指定路径,如果有二级路由，在childern里继续配置

import maps from '@/views/maps.vue'
import section from '@/views/section.vue'
import finance from '@/views/finance.vue'
Vue.use(VueRouter)

const routes = [
  {
    path:'/maps',
    component:maps,
    children:[{
      path:'/maps/section',
      component:section
    }]
 },
 	 path:'/finance',
    component:finance,
]

3，要切记的是，二级路由配置完后，要在maps组件里为section组件留个路由容器

<router-view></router-view>

二、声明式路由和编程式路由跳转
1、声明式路由，通过router-link进行页面跳转

<router-link to="/maps">跳至maps页面</router-link>
<router-link to="/finance">跳至finance页面</router-link>

2、编程式路由，通过绑定@click事件进行跳转

<li  @click='event()'>跳至maps页面</li>

methods: {
        event(){
            this.$router.push(`/maps`)
        }
    },

来源：CSDN

作者：LSSJ

链接：https://blog.csdn.net/jsl_suifeng/article/details/104589130