Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。功能包括:
- 嵌套路由映射
- 动态路由选择
- 模块化、基于组件的路由配置
- 路由参数、查询、通配符
- 展示由 Vue.js 的过渡系统提供的过渡效果
- 细致的导航控制
- 自动激活 CSS 类的链接
- HTML5 history 模式或 hash 模式
- 可定制的滚动行为
- URL 的正确编
vue-router 提供了三种运行模式:
● hash: 使用 URL hash 值来作路由。默认模式。
● history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。
● abstract: 支持所有 JavaScript 运行环境,如 Node.js 服务器端。
Hash模式
vue-router 默认模式是 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,当 URL 改变时,页面不会去重新加载。
hash(#)是URL 的锚点,代表的是网页中的一个位置,单单改变#后的部分(/#/..),浏览器只会加载相应位置的内容,不会重新加载网页,也就是说 #是用来指导浏览器动作的,对服务器端完全无用,HTTP请求中不包括#;同时每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用”后退”按钮,就可以回到上一个位置;所以说Hash模式通过锚点值的改变,根据不同的值,渲染指定DOM位置的不同数据。
History模式
HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL,就是利用 history.pushState API 来完成 URL 跳转而无须重新加载页面;
由于hash模式会在url中自带#,如果不想要很丑的 hash,我们可以用路由的 history 模式,只需要在配置路由规则时,加入"mode: 'history'",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
vue-router 的重定向-redirect
Vue-router是Vue官方提供的路由管理器,在项目中使用Vue-router可以很方便地实现前端路由的管理。Vue-router提供了一些重要的功能,其中之一就是redirect重定向。
redirect重定向是指在用户访问一个路由时,强制将用户重定向到另一个路由。
Vue-router为redirect提供了一个特殊的路由来处理redirect,使用方式也非常简单,只需要将要重定向的路由通过redirect属性指向新的路由即可。
{
path: '/old-path',
redirect: '/new-path'
}
以上代码表示,当用户通过访问“/old-path”路径时,将自动重定向到“/new-path”路径。
Vue-router的redirect提供了非常方便的路由重定向功能,可以用于处理用户访问的非法路径和快速重定向到新的路由。以Vue-router新的重定向方式为例,开发者可以根据需要传递参数,设置特殊的位置“{ path: '*', redirect: '/404' }”等一系列使用方法巧妙,让前端路由更加灵活。
路由懒加载
1:像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大。
2:造成进入首页时,需要加载的内容过多,时间过长,会出现长时间的白屏,即使做了loading也是不利于用户体验。
3:而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时
vue-router路由懒加载_545龙哥哥的博客-CSDN博客
vue路由传参方式的几种方式与获取参数详解
一、声明式传参
1.params传参(显示参数)
在url中会显示出传参的值,刷新页面不会失去拿到的参数,使用该方式传值的时候,需要子路由提前配置好参数:
//路由参数配置
const router = new VueRouter({
routes: [{
path: '/about/:id',
component: User
}]
})//声明式导航使用
<router-link to="/about/12">跳转</router-link>
//路由参数配置
const router = new VueRouter({
routes: [{
name: 'user1',
path: '/about/:id',
component: User
}]
})//声明式导航使用
<router-link :to="{ name: 'user1', params: { id: 123 } }">跳转</router-link>
2.params传参(不显示参数)
在url中不会显示出传参的值,但刷新页面会失去拿到的参数,使用该方式 传值 的时候,需要子路由提前配置好name参数:
//路由参数配置 const router = new VueRouter({ routes: [{ name: 'user1', path: '/about', component: User }] })
//声明式导航使用
<router-link :to="{ name: 'user1', params: { id: 123 } }">跳转</router-link>
3.query 传参
query 传过去的参数会拼接在地址栏中(?name=xx),刷新页面数据不会丢失,使用path和name都可以:
//路由参数配置
const router = new VueRouter({
routes: [{
name: 'user1',
path: '/about',
component: User
}]
})//使用name
<router-link :to="{ name: 'user1', query: { id: 123 }}"></router-link>
//使用path
<router-link :to="{ path: '/about', query: { id: 123 } }"></router-link>
二、编程式传参
1.params传参(显示参数)
//路由配置
{
path: '/child/:id',
component: Child
}
//编程式使用
this.$router.push({
path:'/child/${id}',
})
//路由配置
{
path: '/child:id',
component: Child,
name:Child
}
//编程式使用
this.$router.push({
name:'Child',
params:{
id:123
}
})
2.params传参(不显示参数)
//路由配置
{
path: '/child',
component: Child,
name:Child
}
//编程式使用
this.$router.push({
name:'Child',
params:{
id:123
}
})
3.query 传参
//路由配置
{
path: '/child',
component: Child,
name:Child
}
//编程式使用
//name方式
this.$router.push({
name:'Child',
query:{
id:1
}
})
//path方式
this.$router.push({
path:'/child',
query:{
id:1
}
})
三、获取参数
1、params的获取方式
this.$route.params.xxx
2、query的获取方式
this.$route.query.xxx
四、需要注意的点
1、如果使用params传参,且参数是以对象的形式,跳转路径只能使用name形式而不能用path.
2、如果想要params参数想传参也可以不传参需要在占位符后面加?。
//路由参数配置
const router = new VueRouter({
routes: [{
path: '/search/:keyword?',
name: 'search',
component: () => import('@/pages/Search'),
meta: { show: true }
}]
})
//编程式传参
this.$router.push({
name: "search",
params: {},
query: { keyword: this.keyword },
});
3、解决params传值为空字符串路径会出现问题:
this.$router.push({ name: "search", params: { keyword: "" || undefined }, query: { keyword: this.keyword }, });