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

版本

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

安装

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

bash 复制代码
npm install [email protected]

代码实现

  1. 在src目录下创建router目录
    router/index.js
javascript 复制代码
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
})
  1. 在src目录下创建views目录
    views/foo.vue
javascript 复制代码
<template>
  <div>foo</div>
</template>

views/bar.vue

javascript 复制代码
<template>
  <div>bar</div>
</template>
  1. 在main.js引入router
javascript 复制代码
//....
import router from './router';

//....

new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')
  1. 修改app.vue,引入组件 router-view和router-link
    router-view:显示跳转后的页面
    router-link:链接跳转
javascript 复制代码
<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. 创建嵌套路由
javascript 复制代码
const routes = [
  {  
    path: '/foo', 
    component: () => import('@/views/foo'), 
    children:[
      {
        path: 'childfoo',
        name: 'childfoo',
        component: () => import('@/views/childfoo'), 
      }
    ] 
  },
  {  path: '/bar', component: () => import('@/views/bar') }
]
  1. 在foo.vue增加router-view
javascript 复制代码
<template>
  <div>
    <p>foo</p>
    <router-view></router-view>
  </div>
</template>
  1. 创建childfoo.vue
javascript 复制代码
<template>
  <div>
    <p>child foo</p>
  </div>
</template>
相关推荐
跟着珅聪学java1 天前
spring boot +Elment UI 上传文件教程
java·spring boot·后端·ui·elementui·vue
杉之1 天前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
剑亦未配妥2 天前
Vue2函数式组件实战:手写可调用的动态组件,适用于toast轻提示、tip提示、dialog弹窗等
前端·vue.js·vue
wuaro3 天前
RBAC权限控制具体实现
前端·javascript·vue
前端互助会4 天前
AILabel标注工具指南(二):禁止图片外标注
vue·ailabel
YiHanXii5 天前
Axios 相关的面试题
前端·http·vue·react
申朝先生6 天前
vueRouter的hash模式跟history的区别
vue
小阳生煎6 天前
Vue3当中el-tree树形控件使用
vue
Num_9_G9 天前
使用vue cli 5.0 在vscode中运行vue命令报错
vue