从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>