vue3中路由的使用

路由是什么

vue中的路由是用来管理页面切换或跳转的一种方式。Vue Router是vue官方的路由管理器

1. Vue Router的安装（需要先弄好npm）

npm install vue-router@4 -s

在安装完成之后，开始尝试简单的使用

例如现在你有随便的两个vue文件，你可以通过在app组件中使用router-link标签在两个组件中转换（这里不展开细说，很简单的）

2. 在vue3中使用路由

在main.js中编写代码

// 引入的工厂函数
import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHashHistory } from 'vue-router'
//这两个都需要导入
import demo1 from './components/demo1.vue'
import demo2 from './components/demo2.vue'
//这里是我自己写的两个组件
const app = createApp(App)
const routes = [
  { path: '/', component: demo1 },
  { path: '/2', component: demo2 }
]
//上面的定义path是导航的地址，就是要跳转的地址，componment是需要展示的组件
//这一步是创建路由
const router = createRouter({
  history: createWebHashHistory(),
  routes: routes
})
app.use(router)
// 挂载
app.mount('#app')

在定义好路由之后，我们需要知道组件会被渲染在哪里，这时就要用到路由出口

<template>
  <!-- 出口，与地址对应的组件会被渲染在这里 -->
  <router-view></router-view>
</template>

<script>
export default {
  name: 'App',
}
</script>

此时你可以修改地址栏的地址，来切换两个组件，默认会访问path为’/'的组件

3.路由嵌套

在上面的例子中，我们会将两个不同的组件匹配到不同的路由，但是会在同一个地方被渲染，这种路由被称为顶级路由，但当你所渲染的组件自身（如上面的demo1或demo2）也包含路由时，就需要用到路由嵌套了

例如在demo2中包含一个demo3的出口

此时你需要在dmeo2中添加router-view标签

这是后面demo3会渲染的位置

现在需要考虑的是如何让给demo3匹配一个路由

我们可以在main.js中修改一下定义的routes

const routes = [
  { path: '/', component: demo1 },
  { path: '/2', 
   	component: demo2,
   	children:[
        { path:'3',component: demo3}
        //记得导入demo3
    ]
  }
]

此时在地址栏修改地址为’/2/3’,就可以看到已经渲染demo3的dmeo2组件