从0开始搭建基于VUE的前端项目(四) Vue-Router的使用与配置

版本

1. vue-router 3.6.5 (https://v3.router.vuejs.org/zh/)

安装

安装要指定版本，默认安装的4版本的

npm install vue-router@3.6.5

代码实现

1. 在src目录下创建router目录
   router/index.js

import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router)const routes = [{ path: '/foo', component: () => import('@/views/foo') },{ path: '/bar', component: () => import('@/views/bar') }
]export default new Router({// mode: 'history', // 去掉url中的#routes
})

2. 在src目录下创建views目录
   views/foo.vue

<template><div>foo</div>
</template>

views/bar.vue

<template><div>bar</div>
</template>

3. 在main.js引入router

//....
import router from './router';//....new Vue({store,router,render: h => h(App),
}).$mount('#app')

4. 修改app.vue，引入组件 router-view和router-link
   router-view：显示跳转后的页面
   router-link：链接跳转

<template><div id="app"><p><!-- 使用 router-link 组件来导航. --><!-- 通过传入 `to` 属性指定链接. --><!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --><router-link to="/foo">Go to Foo</router-link> <br/><router-link to="/bar">Go to Bar</router-link></p><!-- 编程式路由 --><button @click="goFoo">goFoo</button><!-- 路由出口 --><!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view></div>
</template><script>export default {name: 'App',components: {},methods: {goFoo() {this.$router.push('foo');}}
}
</script>

嵌套路由

要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。

1. 创建嵌套路由

const routes = [{  path: '/foo', component: () => import('@/views/foo'), children:[{path: 'childfoo',name: 'childfoo',component: () => import('@/views/childfoo'), }] },{  path: '/bar', component: () => import('@/views/bar') }
]

2. 在foo.vue增加router-view

<template><div><p>foo</p><router-view></router-view></div>
</template>

3. 创建childfoo.vue

<template><div><p>child foo</p></div>
</template>