### 一、Vue3.x中的路由
路由可以让应用程序根据用户输入的不同地址动态挂载不同的组件。
[https://next.router.vuejs.org/](https://next.router.vuejs.org/)
~~~
npm install vue-router@next --save
~~~
### **二、Vue3.x路由的基本配置**
#### **1、安装路由模块**
~~~
npm install vue-router@next --save
~~~
#### **2、新建组件**
**components/Home.vue**
~~~
<template>
<div>
Home组件
</div>
</template>
<script lang="ts">
import {
defineComponent,
} from 'vue';
export default defineComponent({
name: 'Home',
});
</script>
<style>
</style>
~~~
**components/News.vue**
~~~
<template>
<div>
News组件
</div>
</template>
<script lang="ts">
import {
defineComponent,
} from 'vue';
export default defineComponent({
name: 'News',
});
</script>
<style>
</style>
~~~
#### **3、配置路由**
新建src/routes.ts 配置路由
~~~
import {createRouter,createWebHashHistory} from 'vue-router'
import Home from "./components/Home.vue"
import News from "./components/News.vue"
const router = createRouter({
// 4. Provide the history implementation to use. We are using the hash history for simplicity here.
history: createWebHashHistory(),
routes: [
{ path: '/', component: Home },
{ path: '/news', component: News }
],
})
export default router
~~~
#### **4、挂载路由**
在main.ts中挂载路由
~~~
import { createApp } from 'vue'
import App from './App.vue'
import router from './routes'
// createApp(App).mount('#app')
const app = createApp(App)
//挂载路由
app.use(router)
app.mount('#app')
~~~
#### **5、渲染组件**
App.vue中通过router-view渲染组件
~~~
<template>
<ul>
<li>
<router-link to="/">首页</router-link>
</li>
<li>
<router-link to="/news">新闻</router-link>
</li>
</ul>
<router-view></router-view>
</template>
<script lang="ts">
import {
defineComponent
} from 'vue';
export default defineComponent({
name: 'App',
});
</script>
<style>
</style>
~~~
### 三、Vue3.x动态路由
**1、配置动态路由**
~~~
const router = createRouter({
// 4. Provide the history implementation to use. We are using the hash history for simplicity here.
history: createWebHashHistory(),
routes: [
{ path: '/', component: Home },
{ path: '/news', component: News },
{ path: '/newsContent/:id', component: NewsContent },
],
})
~~~
**2、路由跳转**
~~~
<li v-for="(item,index) in list" :key="index">
<router-link :to="`/newsContent/${index}`">{{item}}</router-link>
</li>
~~~
**3、获取路由**
~~~
this.$route.params
~~~
### 四、Vue3.x Get传值
~~~
<router-link to="/newsContent?id=2">Get传值</router-link>
~~~
~~~
this.$route.query
~~~
### 五、Vue3.x路由编程式导航(Js跳转路由)
~~~
this.$router.push({ path: 'news' })
~~~
~~~
this.$router.push({
path: '/newsContent/495'
});
~~~
~~~
this.$router.push({ path: '/newscontent', query:{aid:14} }
~~~
~~~
this.$router.push({ path: '/newscontent/123'})
~~~
### 六、Vue3.x路由HTML5 History 模式和 hash 模式
#### 6.1、 hash 模式
~~~
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
history: createWebHashHistory(),
routes: [
//...
],
})
~~~
~~~
http://localhost:8080/#/user
http://localhost:8080/#/news
~~~
**如果想把上面的路由改变成下面方式:**
~~~
http://localhost:8080/news
http://localhost:8080/user
~~~
我们就可以使用HTML5 History 模式
#### 6.2、 HTML5 History 模式
~~~
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [
//...
]
})
~~~
\*\*注意：\*\*开启Html5 History模式后，发布到服务器需要配置伪静态：
[https://router.vuejs.org/zh/guide/essentials/history-mode.html](https://router.vuejs.org/zh/guide/essentials/history-mode.html)
### 七、Vue3.x命名路由
有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 `routes` 配置中给某个路由设置名称。
~~~
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
~~~
要链接到一个命名路由，可以给 `router-link` 的 `to` 属性传一个对象：
~~~
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
~~~
这跟代码调用 `router.push()` 是一回事：
~~~
this.$router.push({ name: 'user', params: { userId: 123 }})
~~~
这两种方式都会把路由导航到 `/user/123` 路径。
~~~
this.$router.push({name:'content',query:{aid:222}})
~~~
### 八、路由重定向
重定向也在`routes`配置中完成。要从重定向`/a`到`/b`：
~~~
const routes = [{ path: '/home', redirect: '/' }]
~~~
重定向也可以针对命名路由：
~~~
const routes = [{ path: '/home', redirect: { name: 'homepage' } }]
~~~
甚至使用函数进行动态重定向：
~~~
const routes = [
{
// /search/screens -> /search?q=screens
path: '/search/:searchText',
redirect: to => {
// the function receives the target route as the argument
// we return a redirect path/location here.
return { path: '/search', query: { q: to.params.searchText } }
},
},
{
path: '/search',
// ...
},
]
~~~
#### 相对重定向
也可以重定向到相对位置：
~~~
const routes = [
{
path: '/users/:id/posts',
redirect: to => {
// the function receives the target route as the argument
// return redirect path/location here.
},
},
]
~~~
### 九、路由别名
重定向是指用户访问时`/home`，URL将被替换`/`，然后与匹配`/`。但是什么是别名？
**别名`/`as`/home`表示用户访问时`/home`，URL保持不变`/home`，但将被匹配，就像用户正在访问时一样`/`。**
以上内容可以在路由配置中表示为：
~~~
const routes = [{ path: '/', component: Homepage, alias: '/home' }]
~~~
别名使您可以自由地将UI结构映射到任意URL，而不受配置的嵌套结构的约束。使别名以a开头，`/`以使路径在嵌套路由中是绝对的。您甚至可以将两者结合起来，并为数组提供多个别名：
~~~
const routes = [
{
path: '/users',
component: UsersLayout,
children: [
// this will render the UserList for these 3 URLs
// - /users
// - /users/list
// - /people
{ path: '', component: UserList, alias: ['/people', 'list'] },
],
},
]
~~~
如果您的路线包含参数，请确保将其包含在任何绝对别名中：
~~~
const routes = [
{
path: '/users/:id',
component: UsersByIdLayout,
children: [
// this will render the UserDetails for these 3 URLs
// - /users/24
// - /users/24/profile
// - /24
{ path: 'profile', component: UserDetails, alias: ['/:id', ''] },
],
},
]
~~~
### 十、嵌套路由
配置News组件的子组件
#### **1、新建news/Add.vue**
~~~
<template>
<div>
增加新闻
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
data(){
return{}
},methods:{
}
})
</script>
~~~
#### **2、新建news/Edit.vue**
~~~
<template>
<div>
修改新闻
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
data(){
return{
}
},methods:{
}
})
</script>
~~~
#### 3、配置嵌套路由
~~~
import { createRouter, createWebHistory } from 'vue-router'
//引入组件
import Home from "./components/Home.vue"
import News from "./components/News.vue"
import NewsAdd from "./components/News/Add.vue"
import NewsEdit from "./components/News/Edit.vue"
import User from "./components/User.vue"
//配置路由
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', component: Home, alias: '/home' },
{
path: '/news', component: News,
children: [ //子路由
{ path: '', redirect:"/news/add"},
{ path: 'add', component: NewsAdd },
{ path: 'edit', component: NewsEdit },
]
},
{ path: '/user', component: User },
],
})
export default router
~~~
#### 4、News.vue中挂载路由
~~~
<template>
<div class="content">
<div class="left">
<ul>
<li><router-link to="/news/add">增加新闻</router-link></li>
<li><router-link to="/news/edit">修改新闻</router-link></li>
</ul>
</div>
<div class="right">
<router-view></router-view>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
data() {
return {};
},
});
</script>
<style lang="scss">
.content {
display: flex;
padding: 20px;
.left {
width: 200px;
border-right: 1px solid #ddd;
min-height: 400px;
}
.right {
flex: 1;
}
}
</style>
~~~
- 空白目录
- 第一节 Vue3.x教程、Vue3.x简介、搭建Vue3.x环境、创建运行Vue3.x项目、分析Vue目录结构
- 第二节 Vue3.x绑定数据、绑定html、绑定属性、循环数据
- 第三节 Vue3.x中的事件方法入门、模板语法模板中类和样式绑定
- 第四节 Vue3.x中的事件方法详解、事件监听、方法传值、事件对象、多事件处理程序、事件修饰符、按键修饰符
- 第五节 Vue3.x中Dom操作$refs 以及表单（ input、checkbox、radio、select、 textarea ）结合双休数据绑定实现在线预约功能
- 第六节 Vue3.x中使用JavaScript表达式 、条件判断、 计算属性和watch侦听
- 第七节 Vue3.x 实现一个完整的toDoList（待办事项） 以及类似京东App搜索缓存数据功能
- 第八节 Vue3.x中的模块化以及封装Storage实现todolist 待办事项 已经完成的持久化
- 第九节 Vue3.x中的单文件组件 定义组件 注册组件 以及组件的使用
- 第十节 Vue3.x父组件给子组件传值、Props、Props验证、单向数据流
- 第十一节 Vue3.x父组件主动获取子组件的数据和执行子组件方法 、子组件主动获取父组件的数据和执行父组件方法
- 第十二节 Vue3.x组件自定义事件 以及mitt 实现非父子组件传值
- 第十三节 Vue3.x自定义组件上面使用v-mode双休数据绑定 以及 slots以及 Prop 的Attribute 继承 、禁用 Attribute 继承
- 第十四节 Vue3.x中组件的生命周期函数（lifecycle）、 this.$nextTick、动态组件 keep-alive、Vue实现Tab切换
- 第十五节 Vue3.x中全局绑定属性、使用Axios和fetchJsonp请求真实api接口数据、函数防抖实现百度搜索
- 第十六节 Vue3.x中的Mixin实现组件功能的复用 、全局配置Mixin
- 第十七节 Vue3.x Teleport、使用Teleport自定义一个模态对话框的组件
- 第十八节 Vue3.x Composition API 详解
- 第十九节 Vue3.x中集成Typescript 使用Typescript
- 第二十节 Vue-Router 详解
- 第二十节 Vuex教程-Vuex 中的 State Mutation Getters mapGetters Actions Modules