vue-配置路由规则和显示路由

  路由规则的配置在src/router/index.js中,可配置如下内容:

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  {
    path: '/home', //相对于http://localhost:端口号
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

  在App.vue进行显示:

<template>
  <div id="nav">
    <router-link to="/home">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>
</template>

  router-link和router-view是vue提供的组件;

  router-link是链接到路由,最后会渲染成一个a标签,href指向的就是路由的路径;

  router-view是路由转发的组件最终要显示的一个位置。

  总结:router-link是负责引入组件,而router-view是组件最终要显示的位置。

  这种方式也是父子组件的关系,但和之前学的父子组件不一样的是:他的子组件是动态的,根据路由不同而不同的;之前都是固定好的,父组件的子组件都是确定下来的。

上一篇:uni-app 配置项目底部选项卡 tabbr配置


下一篇:从零开始的电脑维修社团旅程 Version2.0 Beta