Vue3开发教程( 四、Vue-router基础篇)
介绍vuer-router中的<router-link>、<router-view>、嵌套路由、router-api操作等相关知识,并集将内容集成到demo项目中。
四、Vue-router基础篇
由于vue一般是单页面程序,但是实际上我们会有很多的页面试图。基于这个需求就需要一个路由通过某种路径来展示不同的视图。这一节我们来学习的Vue-route基础知识
1、安装vue-router
vscode终端中执行以下命令安装
npm install vue-router@4
安装后我们在node_modules中可以看到vue-router
2、配置vue-router
创建router
在src下创建目录router,并在router下创建index.ts文件
index.ts文件内容
//导入vue-router
import { createRouter, createWebHashHistory } from "vue-router"
//创建路由表
const routes = []
//创建路由
const router = createRouter({
history: createWebHashHistory(),
routes
})
配置router
添加或修改main.js为以下内容
import { createApp } from 'vue'
import App from './App.vue'
//导入router
import router from './router'
//应用使用router
createApp(App).use(router).mount('#app')
//将router作为默认导出
export default router
3、编写第一个vue-router应用
创建视图文件
在src下创建views目录,并新建Home.vue和About.vue文件
Home.vue
<template>
<div>Home</div>
</template>
About.vue
<template>
<div>About</div>
</template>
将试图配置到router中
修改src/rourer/index.ts中的路由表,分别将配置Home与About的路由path。
//创建路由表
const routes = [
{path:'/home', component: () => import('../views/Home.vue')},
{path:'/about', component: () => import('../views/About.vue')}
]
添加router-view与router-link
修App.vue template为如下内容
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + Vite" />
<p>
<!--使用 router-link 组件进行导航 -->
<router-link to="/home">Home</router-link> |
<router-link to="/about">About</router-link>
</p>
<div>
这是router-view
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template>
运行并查看结果
点击Home会显示home视图,点击About则显示About视图。同时浏览器的地址也会改变为配置的path,说明我们的路由生效了。
提示:直接通过浏览器输入对应的路由也可以改变视图
4、带参数的路由
vue中支持带有参数的路径。例如/user/1,如果想获取这个url中的1可以使用$route.params.id。
创建文件User.vue
User.vue
<template>
<div>User {{ $route.params.id }}</div>
</template>
/router/index.ts
//创建路由表
const routes = [
{path:'/home', component: () => import('../views/Home.vue')},
{path:'/about', component: () => import('../views/About.vue')},
//动态路由url:/user/1 id为1
{path:'/user/:id', component: () => import('../views/User.vue')}
]
App.vue
<p>
<!--使用 router-link 组件进行导航 -->
<router-link to="/home">Home</router-link> |
<router-link to="/about">About</router-link>|
<!--添加路由的参数-->
<router-link to="/user/1">User</router-link>
</p>
运行并查看结果
点击User可以看到下方router-view内容的变化,修改url为/user/3后内容也会变化。
5、嵌套路由
嵌套路由顾名思义就是已经被路由的页面内部还有路由,下面我们就在User页面下做两个嵌套路由的页面Profile.vue,Posts.vue
创建Profile.vue,Posts.vue页面
Profile.vue
<template>
<div>user profile</div>
</template>
Posts.vue
<template>
<div>user posts</div>
</template>
User.vue
<template>
<div>User {{ $route.params.id }}</div>
<div><router-view></router-view></div>
</template>
/router/index.ts
const routes = [
{ path: '/home', component: () => import('../views/Home.vue') },
{ path: '/about', component: () => import('../views/About.vue') },
//动态路由url:/user/1 id为1
{
path: '/user/:id', component: () => import('../views/User.vue'),
children: [
{
// 当 /user/:id/profile 匹配成功
// UserProfile 将被渲染到 User 的 <router-view> 内部
path: 'profile',
component: () => import('../views/user/Profile.vue')
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 将被渲染到 User 的 <router-view> 内部
path: 'posts',
component: () => import('../views/user/Posts.vue')
}
]
}
]
运行并查看结果
可以看到输入/user/2/profile User页面显示user profile 输入/user/2/posts显示user posts,说明User页面内部的路由已经生效。
6.编程式导航
Vue可以使用内置对象$router
来进行路由切换从而实现页面的变化。
下面我们修改Posts.vue、Profile.vue页面,通过
$router
实现两个页面的相互跳转。
Posts.vue
<script lang="ts">
export default {
methods: {
gotoProfile() {
console.log("gotoProfile");
//使用绝对路径返回到
this.$router.push("/user/2/profile");
}
}
}
</script>
<template>
<div>user posts</div>
<button @click="gotoProfile()">goto Profile</button>
</template>
Profile.vue
<script lang="ts">
export default {
methods: {
gotoPosts() {
console.log("gotoPosts");
//使用相对路径返回
//router.replace它的作用类似于 router.push,唯一不同的是,它在导航时不会向 history 添加新记录
this.$router.replace("./posts");
}
}
}
</script>
<template>
<div>user profile</div>
<button @click="gotoPosts()">goto Posts</button>
</template>
运行并查看结果
点击按钮我们可以看到Posts与Profile页面相互切换。
提示:router.replace它的作用类似于 router.push,唯一不同的是,它在导航时不会向 history 添加新记录。
更多推荐
所有评论(0)