前言
我们的html、css、js等文件经webpack打包,存放在服务器中,当我们发起请求,每个url对应一个js文件,然后渲染出我们的页面。url与js文件的映射关系被称为路由映射表,这就是路由的基本定义。
vue-router为了单页面富应用(SPA)而生,利用vue-router,我们的页面实现了无刷新更改页面url,访问不同的内容。webpack打包时,会将每一个路由文件单独打包为一个js,在页面请求时按需加载。
一、vue-router的使用
上一篇博客讲了怎么使用vue-cli创建脚手架工程,这里同样使用CLI创建vue-router工程,工程会自带两个路由Home.vue、About.vue。总结vue-router使用步骤:
1、 创建将要使用的路由.vue文件;
这里about和home以及app、helloworld是脚手架工程自带的,实现两个简单的路由标签跳转。还有很多其他功能下面会一一介绍。
2、在router文件夹下的index.js中配置路由:
- 创建路由对象
- 配置路由routes映射关系
- 导出路由对象
下面给出index.js的示例代码:
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
// 2、配置路由映射关系
const routes = [
{
path: '/',
name: 'Home',
component: Home,
// 嵌套子路由,在父路由Home.vue文件中决定显示
children: [
{
path: '/',
// 默认路径
redirect: 'news'
},
{
path: '/news',
name: 'News',
component: () => import('../components/HomeNews.vue')
},
{
path: '/message',
name: 'Message',
component: () => import('../components/HomeMessage.vue')
}
]
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
// 动态路由 path: '/user/:userId'
path: '/user/:userId',
name: 'User',
// 路由懒加载,打包时路由组件打包到单独的js文件中,用到时再加载,提升浏览器速度
component: () => import('../components/User.vue')
},
{
path: '/profile',
name: 'Profile',
component: () => import('../components/Profile.vue')
}
]
// 1、创建路由对象
const router = createRouter({
routes,
// 配置history路由
history: createWebHistory(process.env.BASE_URL),
// linkActiveClass属性修改被点击的router-link标签类名
// 原始类为router-link-active、router-link-exact-active,修改只改变前者
linkActiveClass: 'active'
})
// 3、导出路由
export default router
3、使用路由,并确定其显示位置
<template>
<div id="nav">
<!--router的全局组件,最终渲染成<a>标签-->
<!--tag\replace属性无效??-->
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<button @click="aboutClick">About</button> |
<router-link :to="'/user/' + userId">User</router-link> |
<!--如果想用button来跳转,同样使用this.$router.push({path: '/profile', query: {name: 'zkl', age: 23, height: 173.5}})-->
<router-link :to="{path: '/profile', query: {name: 'zkl', age: 23, height: 173.5}}">Profile</router-link>
<div id="app">
<!--router-view决定router映射的组件显示位置,这里就是home、about下方-->
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
userId: 'zkl',
};
},
methods: {
aboutClick() {
// this.$router获取路由对象
this.$router.push('/about');
},
},
};
</script>
<style scoped>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
text-align: center;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.active {
color: #42b983;
}
</style>
二、嵌套子路由
使用children属性,在配置路由映射关系时配置嵌套子路由。上面的index.js已经给出了配置代码,子路由要在其父路由中设置路由标签和显示位置。这里news、message都是home的嵌套路由。
代码如下(示例):
<template>
<div class="home">
<router-link to="/news">News</router-link> |
<router-link to="/message">Message</router-link>
<router-view></router-view>
<br>
<img alt="Vue logo"
src="../assets/logo.png">
<HelloWorld :msg="msg" />
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue';
export default {
name: 'Home',
data() {
return {
msg: 'Welcome to Your Vue.js App',
};
},
components: {
HelloWorld,
},
};
</script>
三. 动态路由
动态路由的url路径不是写死的,而是动态变化的。例如user,我们访问某一用户的相关信息时,通常以这样的路径/user/userid,那么后面的userid就是动态变化的,不能写死。
配置动态路由使用 path: '/user/:userId’这种方式,使用时 User动态绑定userId。
代码如下(示例):
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
// 2、配置路由映射关系
const routes = [
{
path: '/',
name: 'Home',
component: Home,
// 嵌套子路由,在父路由Home.vue文件中决定显示
children: [
{
path: '/',
// 默认路径
redirect: 'news'
},
{
path: '/news',
name: 'News',
component: () => import('../components/HomeNews.vue')
},
{
path: '/message',
name: 'Message',
component: () => import('../components/HomeMessage.vue')
}
]
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
// 动态路由 path: '/user/:userId'
path: '/user/:userId',
name: 'User',
// 路由懒加载,打包时路由组件打包到单独的js文件中,用到时再加载,提升浏览器速度
component: () => import('../components/User.vue')
},
{
path: '/profile',
name: 'Profile',
component: () => import('../components/Profile.vue')
}
]
// 1、创建路由对象
const router = createRouter({
routes,
// 配置history路由
history: createWebHistory(process.env.BASE_URL),
// linkActiveClass属性修改被点击的router-link标签类名
// 原始类为router-link-active、router-link-exact-active,修改只改变前者
linkActiveClass: 'active'
})
// 3、导出路由
export default router
可以通过this. r o u t e . p a r a m s . u s e r I d 来 访 问 参 数 。 t h i s . route.params.userId来访问参数。this. route.params.userId来访问参数。this.route获取到当前活跃路由。this.$router获取整个路由对象。注意区分
<template>
<div>
<h2>我是用户组件,我是一个动态路由</h2>
<p>我是用户的相关信息</p>
<!--$toute获取当前活跃路由-->
<h2>{{$route.params.userId}}</h2>
</div>
</template>
该处使用的url网络请求的数据。