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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue-配置路由规则和显示路由，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含984字，纯文字阅读大概需要2分钟。

内容图文

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

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

内容总结

以上是互联网集市为您收集整理的vue-配置路由规则和显示路由全部内容，希望文章能够帮你解决vue-配置路由规则和显示路由所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---