在某些情况下,一个页面的path路径可能是不确定的,比如我们进入用户界面时,希望是如下的路径:
/user/aaa或者/user/bbb
除了有前面的/user之外,后面还跟上了用户的ID
这种path和Component的匹配关系,我们称之为动态路由(也是路由传递数据的一种方式)
代码写法是:
/:后面是用户名。但是现在无法显示用户的内容,因为对不上号。
做法很简单,就是在router-link下的to路径下添加用户名:
结果:
但是这个一般是动态获取的数据,
使用v-bind:to=’‘,也可以直接用语法糖
结果:
$router:是整个router对象
$routr:是出于活跃状态下的routes对象。
是众多对象中处于活跃的一个。
例如,在点击用户时,显示出用户的信息。
在User.vue中编写代码如下:
利用route的属性params去获取userId,而这个userId就是:
换言之,这个id跟配置路径的这id一一对应。
结果:
路由的懒加载
官方给出的解释:
当打包构建应用时,JavaScript包会变得非常大,影响页面加载
如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
简而言之,就是在打包的时候进行了分块打包:
app.js表示当前应用程序开发的所有代码(业务代码)
manifest.js是用来为打包的代码做底层支撑的。
vendor.js是提供商第三方,比如vue
路由懒加载做什么?
路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块。只有在这个路由被访问到的时候,才加载对应的组件
懒加载的应用方式:
方式一:结合Vue的异步组件和webpack的代码分析
const Home=resolve =>{ require.ensure([’…/components/Home.vue’].()=>{resolve(require(’…/components/Home.vue’))}))
这是早期的一种方式
方式二:AMD写法
const About = resolve => require([’…/components/About.vue’],resolve);
方式三:在ES6中,我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割
const Home =() =>import(’…/components/Home.vue’)
推荐使用
代码应用,
1,定义:
const Home = () => import('../components/Home.vue');
const About = () => import('../components/About.vue');
const User = () => import('../components/User.vue');
2,应用
{
path: '/home',
name: 'Home',
// component: Home
component:Home
},
最后打包的时候,一个组件,对应一个js文件。
嵌套路由
嵌套路由是一个很常见的功能
比如在home页面中,我们希望通过/home/news和/home/message访问一些内容
一个路径映射一个组件,访问这两个路径也会分别渲染两个组件
实现嵌套路由有两个步骤:
创建对应的子组件,并且在路由映射中配置对应的子路由
在组件内部使用标签
步骤:
1,创建组件:
2,在路由文件下配置:
//要记得先引入
const HomeMessage = () => import('../components/HomeMessage.vue')
const About = () => import('../components/About.vue');
{
path: '/home',
name: 'Home',
// component: Home
component: Home,
children: [
{
// 不加/
path: 'news',
component: HomeNews
},
{
path: 'message',
component: HomeMessage
}
]
},
3,在哪里使用,就在哪里用标签。比如这里是首页:
<template>
<div>
<h2>我是首页</h2>
<p>我是首页内容</p>
<router-view></router-view>
</div>
</template>
接着在哪里显示,就写到哪里。路径要写完整路径:
<template>
<div>
<h2>我是首页</h2>
<p>我是首页内容</p>
<router-link to="/home/news">新闻</router-link>
<router-link to="/home/message">信息</router-link>
<router-view></router-view>
</div>
</template>
子路由中的默认路由:
{
path: '/home',
name: 'Home',
// component: Home
component: Home,
children: [
{
path: '/',
redirect: 'news'
},
{
// 不加/
path: 'news',
component: HomeNews
},
{
path: 'message',
component: HomeMessage
}
]
},
前面不加/
传递参数的方式
两种类型:params和query
params的类型:
配置路由格式:/router/:id
传递的方式:在path后面跟上对应的值
传递后形成的路径:/router/123,/route/abc
query的类型:
配置路由格式:/router,也就是普通配置
传递的方式:对象中使用query的key作为传递方式
传递后形成的路径:/router?id=123,/router?id=abc
例子:
1,创建组件:
2,配置完之后,应用:
<template>
<div id="app">
<!-- <img src="./assets/logo.png">
<router-view/> -->
<router-link to="/home" tag="button">首页</router-link>
<router-link to="/about" replace>关于</router-link>
<!-- <router-link to="/user/userId">用户</router-link> -->
<router-link :to="'/user/' + userId">用户</router-link>
<!-- <router-link to="/profile">另一个用户组件</router-link> -->
<!-- 传入数据的话,必须是对象 -->
<router-link
:to="{
path: '/profile',
query: {
name: 'tgui',
age: 19,
},
}"
>另一个用户组件</router-link
>
<!-- <button @click="homeClick">首页</button>
<button @click="aboutClick">关于</button> -->
<router-view></router-view>
</div>
</template>
然后路径上显示:
也可以用button去显示,代码如下:
<template>
<div id="app">
<!-- <img src="./assets/logo.png">
<router-view/> -->
<router-link to="/home" tag="button">首页</router-link>
<router-link to="/about" replace>关于</router-link>
<!-- <router-link to="/user/userId">用户</router-link> -->
<router-link :to="'/user/' + userId">用户</router-link>
<!-- <router-link to="/profile">另一个用户组件</router-link> -->
<!-- 传入数据的话,必须是对象 -->
<router-link
:to="{
path: '/profile',
query: {
name: 'tgui',
age: 19,
},
}"
>另一个用户组件</router-link
>
<!-- <button @click="homeClick">首页</button>
<button @click="aboutClick">关于</button> -->
<button @click="userClick">用户</button>
<button @click="profileClick">档案</button>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
userId: "lisi",
};
},
methods: {
homeClick() {
// 通过代码的方式修改路径,vue-router
// this.$router.push("/home");
this.$router.replace("/home");
console.log("homeClick");
},
aboutClick() {
// this.$router.push("/about");
this.$router.replace("/about");
console.log("aboutClick");
},
userClick() {
this.$router.push("/user/" + this.userId);
},
profileClick() {
this.$router.push({
path: "/profile",
query: {
name: "tgui",
age: 19,
},
});
},
},
};
</script>