从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>
相关推荐
会飞的鱼先生1 小时前
Vue3的内置组件 -实现过渡动画 TransitionGroup
前端·javascript·vue.js·vue
瓯雅爱分享2 小时前
任务管理系统,Java+Vue,含源码与文档,科学规划任务节点,全程督办保障项目落地提效
java·mysql·vue·软件工程·源代码管理
Sahas10196 小时前
vite+vue2+elementui构建之 package.json
elementui·vue·vite
全栈老李技术面试19 小时前
【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题
csj5020 小时前
前端基础之《Vue(11)—自定义指令》
前端·vue
jaywongX1 天前
Base64编码原理:二进制数据与文本的转换技术
前端·javascript·vue
前端极客探险家1 天前
前端 Excel 工具组件实战:导入 → 可编辑表格 → 导出 + 样式同步 + 单元格合并
前端·typescript·vue·excel
有什么东东2 天前
山东大学软件学院创新项目实训开发日志(20)之中医知识问答自动生成对话标题bug修改
java·vue·bug·springboot
络72 天前
IDEA导入并启动若依项目步骤(SpringBoot+Vue3)
java·spring boot·mysql·vue·intellij-idea
脑瓜嗡4 天前
发送百度地图的定位
vue·php