从0开始搭建基于VUE的前端项目(四) Vue-Router的使用与配置
版本
- vue-router 3.6.5 (https://v3.router.vuejs.org/zh/)
安装
安装要指定版本，默认安装的4版本的
npm install vue-router@3.6.5
代码实现
- 在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
})
- 在src目录下创建views目录
views/foo.vue
<template><div>foo</div>
</template>
views/bar.vue
<template><div>bar</div>
</template>
- 在main.js引入router
//....
import router from './router';//....new Vue({store,router,render: h => h(App),
}).$mount('#app')
- 修改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>嵌套路由
要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
- 创建嵌套路由
const routes = [{ path: '/foo', component: () => import('@/views/foo'), children:[{path: 'childfoo',name: 'childfoo',component: () => import('@/views/childfoo'), }] },{ path: '/bar', component: () => import('@/views/bar') }
]
- 在foo.vue增加router-view
<template><div><p>foo</p><router-view></router-view></div>
</template>
- 创建childfoo.vue
<template><div><p>child foo</p></div>
</template>