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

2021-03-31 20:01:50 阅读：175 来源： 互联网

　　路由规则的配置在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是组件最终要显示的位置。

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

标签：About,vue,规则,组件,router,Home,路由
来源： https://www.cnblogs.com/ibcdwx/p/14603465.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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