一、路由
https://next.router.vuejs.org/ 官网
https://router.vuejs.org/zh/installation.html 中文文档
1.1 安装路由模块
npm install vue-router@next --save
1.2 配置路由
创建src/routers.ts
import {createRouter, createWebHashHistory} from 'vue-router';
// 引入组件
import Home from "@/components/Home.vue";
import News from "@/components/News.vue";
import User from "@/components/User.vue";
// 配置路由
const router = createRouter({
history: createWebHashHistory(),
routes: [
{path: '/', component: Home},
{path: '/news', component: News},
{path: '/user', component: User},
]
});
export default router;
挂载路由 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');
根组件里渲染组件 App.vue
App.vue中通过router-view渲染组件
<template>
<ul class="header">
<li>
<router-link to="/">首页</router-link>
</li>
<li>
<router-link to="/news">新闻</router-link>
</li>
<li>
<router-link to="/user">用户</router-link>
</li>
</ul>
<!--根组件 渲染组件 表示-->
<router-view></router-view>
</template>
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
name: 'App',
});
</script>
<style lang="scss" scoped>
* {
margin: 0px;
padding: 0px;
}
.header {
width: 100%;
height: 44px;
line-height: 44px;
list-style: none;
background: #000000;
color: #ffffff;
li {
display: inline-block;
margin-right: 20px;
color: #ffffff;
a {
color: #ffffff;
}
}
}
</style>
1.3 动态路由
配置动态路由 routers.ts
import {createRouter, createWebHashHistory} from 'vue-router';
// 引入组件
import Home from "@/components/Home.vue";
import News from "@/components/News.vue";
import User from "@/components/User.vue";
import NewsContent from "@/components/NewsContent.vue";
// 配置路由
const router = createRouter({
history: createWebHashHistory(),
routes: [
{path: '/', component: Home},
{path: '/news', component: News},
{path: '/user', component: User},
// 动态路由 :aid 可以匹配路由上的值,例如:/newscontent/123 此时,aid=123
{path: '/newscontent/:aid', component: NewsContent},
]
});
export default router;
路由跳转 News.vue
<template>
<h1>News组件</h1> <br>
<ul>
<li v-for="(item, index) in list" :key="index">
<!--动态路由跳转-->
<router-link :to="`/newscontent/${index}`">{{item}}</router-link>
</li>
</ul>
</template>
<!-- 设置语言为ts -->
<script lang="ts">
import {defineComponent} from 'vue'
interface News {
list: string[]
}
export default defineComponent({
name: "News",
data() {
return {
list: []
} as News
},
mounted(): void {
for (let i = 0; i < 10; i++) {
this.list.push(`我是第${i}条新闻`)
}
}
})
</script>
<style scoped>
</style>
获取动态路由传过来的参数 NewsContent.vue
<template>
<h1>newsContent组件---{{aid}}</h1>
</template>
<!-- 设置语言为ts -->
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
name: "NewsContent",
data() {
return {
aid: ""
}
},
mounted(): void {
// 获取动态路由传过来的值
console.log(this.$route.params);
this.aid = this.$route.params.aid[0];
}
})
</script>
<style scoped>
</style>
1.4 Get传值
配置路由 routers.ts
{path: '/newscontent', component: NewsContent}
路由跳转 News.vue
<li v-for="(item, index) in list" :key="index">
<!--Get路由跳转-->
<router-link :to="`/newscontent?aid=${index}`">{{item}}</router-link>
</li>
获取Get路由传过来的参数 NewsContent.vue
<!-- 设置语言为ts -->
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
name: "NewsContent",
data() {
return {
// 获取get路由传过来的值
aid: this.$route.query.aid
}
},
mounted(): void {
// 获取get路由的传值
console.log(this.$route.query);
}
})
</script>
1.5 路由编程式导航
this.$router.push({path: '/news'})
// 动态路由传值
this.$router.push({
path: '/newscontent/1'
})
// Get路由传值
this.$router.push({
path: '/newscontent', query:{aid:1}
})
1.6 路由HTML5 history模式和hash模式
hash 模式 router.ts
import {createRouter, createWebHashHistory} from 'vue-router';
// 配置路由
const router = createRouter({
history: createWebHashHistory(),
routes: [
...
]
});
export default router;
http://localhost:8080/#/user
http://localhost:8080/#/news
如果想把上面的路由改变成下面的方式
# 没有“#”
http://localhost:8080/user
http://localhost:8080/news
HTML5 history模式 router.ts
import {createRouter, createWebHistory} from 'vue-router';
// 配置路由
const router = createRouter({
history: createWebHistory(),
routes: [
...
]
});
export default router;
**注意:**开启HTML5 history模式后,发布到服务器需要配置伪静态:
https://router.vuejs.org/zh/guide/essentials/history-mode.html
1.7 命令路由
配置路由 routers.ts
const router = createRouter({
history: createWebHashHistory(),
routes: [
...
// 动态路由
{
path: '/user/:userid',
name: 'user',
component: User
},
// Get传参
{
path: '/news',
name: 'news',
component: User
},
]
});
使用
// 动态路由
<router-link :to="{name: 'user', params: {userId: 123}}">{{item}}</router-link>
// get传参
<router-link :to="{name: 'news', query: {aid: 123}}">{{item}}</router-link>
this.$router.push({name: 'user', params: {userId: 123}})
this.$router.push({name: 'news', query: {aid: 123}})
1.8 路由重定向
配置路由 routers.ts
const router = createRouter({
history: createWebHashHistory(),
routes: [
{path: '', redirect: '/home'},
]
});
重定向也可以针对命名路由:
const router = createRouter({
history: createWebHashHistory(),
routes: [
{path: '/home', redirect: {name: 'homepage'}},
]
});
1.9 路由别名
配置路由 routers.ts
import {createRouter, createWebHashHistory} from 'vue-router';
// 引入组件
import Home from "@/components/Home.vue";
import News from "@/components/News.vue";
import User from "@/components/User.vue";
import NewsContent from "@/components/NewsContent.vue";
// 配置路由
const router = createRouter({
history: createWebHashHistory(),
routes: [
{path: '/', component: Home},
// alias 路由起多个别名
{path: '/news', component: News, alias:["/news01", "/news02"]},
// alias 路由起别名,可以通过 /people 访问 /user
{path: '/user', component: User, alias: '/people'},
{path: '/newscontent', component: NewsContent},
]
});
export default router;
1.10 嵌套路由
配置路由 routers.ts
import {createRouter, createWebHashHistory} from 'vue-router';
// 引入组件
import Home from "@/components/Home.vue";
import News from "@/components/News.vue";
import User from "@/components/User.vue";
import UserList from "@/components/User/UserList.vue";
import UserAdd from "@/components/User/UserAdd.vue";
// 配置路由
const router = createRouter({
history: createWebHashHistory(),
routes: [
{path: '/', component: Home},
{path: '/news', component: News},
{
// 嵌套路由
path: '/user', component: User,
// 在父组件User里去渲染子组件,该子组件UserList和UserAdd只在父组件里指定的位置上渲染
children: [
{path: '', redirect: '/user/list'},
{path: 'list', component: UserList},
{path: 'add', component: UserAdd},
]
},
]
});
export default router;
创建子组件User/userList.vue
<template>
<div>
UserList 组件
</div>
</template>
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
name: "UserList"
})
</script>
<style scoped>
</style>
创建子组件User/userAdd.vue
<template>
<div>
UserAdd 组件
</div>
</template>
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
name: "UserAdd"
})
</script>
<style scoped>
</style>
父组件User.vue
<template>
<div class="content">
<div class="left">
<ul>
<li>
<router-link to="/user/list">用户列表</router-link>
</li>
<li>
<router-link to="/user/add">增加用户</router-link>
</li>
</ul>
</div>
<div class="right">
<!--该子组件只在这个div里渲染-->
<router-view></router-view>
</div>
</div>
</template>
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
name: "User",
})
</script>
<style lang="scss" scoped>
.content {
display: flex;
.left {
width: 200px;
min-height: 400px;
border-right: 1px solid #eeeeee;
padding-top: 20px;
ul {
list-style: none;
li {
margin-bottom: 20px;
text-align: center;
}
}
}
.right {
/* 自适应 */
flex: 1;
}
}
</style>