每天一点点之vue框架开发 - vue-router路由进阶(路由别名、跳转、默认路由、二级路由、路由守卫)
const routes = [
{path:'/footer',name:footerLink,component:Footer}
]
在组件中的路由中通过对象属性来实现路由
<router-link :to="{name:homeLink}">Mirror微申</router-link>
this.$router.go(-1)
this.$router.replace(‘/footer’)
// 还可以通过别名跳转
this.$router.replace({name:’footerLink’})
this.$router.push(‘/footer’)
this.$router.push({name:’footerLink’})
const routes = [
{path:'/',redirect:'/home'},
{path:'/home',name:homeLink,component:Home},
]
或者在路由中添加
const routes = [
{path:'*',redirect:'/'},
]
这样写有两个好处,一个是设置了默认访问路由,还有一个就是当用户在地址栏输入错误的时候跳转到首页
import Home from '../../components/home/Home';
import Footer from "../../components/footer/Footer"; export const routes = [
{ path: '/', name: 'homeLink', component: Home },
{ path: '/footer', name: 'footerLink', component: Footer },
{ path: '*', redirect: '/' },
]
说明,使用 export 将数组暴露出去,import引入组件
2.在main.js 中引入路由文件
import { routes } from './assets/js/routes.js'
路由守卫
1.全局守卫
// 全局守卫
router.beforeEach((to,from,next)=>{
if(to.path == '/login' || to.path == '/register'){
next();
}else{
alert("你还没有登录,请先登陆");
next('/login');
}
})
参数说明:
to:去那
from:到哪里
next:跳转到哪里,回调函数
2.后置钩子
在路由之后出发,其实和全局守卫差不多
router.afterEach((to,from) => {
alert("后置钩子");
})
3.独享守卫
就是在路由中添加 beforeEnter ,访问其他链接的时候,不会提示,只有在访问特定路由的时候才会触发
{ path: '/blogging', name: 'bloggingLink', component: Blogging ,beforeEnter: (to, from, next) => {
if(to.path == '/login' || to.path == '/register'){
next();
}else{
alert("你还没有登录,请先登陆");
next('/login');
}
}},
4.组件内守卫
就是在组件内进行守卫,不能和路由守卫同用
export default {
data(){
return {
name:'Victor'
}
},
// 组件进入
beforeRouteEnter (to, from, next) {
next(vm => {
alert('Hello ' + this.name)
})
},
// 组件离开
beforeRouteLeave (to, from, next) {
if(confirm('确认离开吗?') == true) {
next();
}else{
next(false);
}
}
}
说明:在 beforeRouteEnter 中如果想访问data,需要在回调中访问
每天一点点之vue框架开发 - vue-router路由进阶(路由别名、跳转、默认路由、二级路由、路由守卫)的更多相关文章
- 每天一点点之vue框架开发 - vue坑-This relative module was not found
94% asset optimization ERROR Failed to compile with 1 errors This relative module was not found: * . ...
- 每天一点点之vue框架开发 - vue坑-input 的checked渲染问题
选中radio或者checkbox需要注意的是: 不管<input type='radio checked='true''> 你的checked属性值是true或者false,他都会选中 ...
- 每天一点点之vue框架开发 - vue组件之间传值(父向子传值)
路由文件 { path: '/productListBase', name: 'productListLink', component: ProductListBase, redirect: '/pr ...
- 每天一点点之vue框架开发 - vue 动态替换路由(地址栏)参数
import merge from 'webpack-merge': // 修改原有参数 this.$router.push({ query:merge(this.$route.query,{'max ...
- 每天一点点之vue框架开发 - vue中使用vue-router切换页面时自动滚动到顶部的方法
1. 在main.js入口文件中写入 //路由跳转后,页面回到顶部 router.afterEach(() => { document.body.scrollTop = 0; document. ...
- 每天一点点之vue框架开发 - 引入Jquery
1. 安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf.js中添加如下内容 var webpack = require ...
- 每天一点点之vue框架开发 - 使用vue-router路由
1.安装路由(安装过的跳过此步) // 进入项目根目录 cd frontend // 安装 npm install vue-router --save-dev 2.在入口文件main.js中引入路由 ...
- 每天一点点之vue框架开发 - 如何在一个页面调用另一个同级页面的方法
使用场景: 页面分为header.home.footer三部分,需要在home中调用header中的方法,这两个没有相互引入 官方给出方法: api传送门 在项目中实现: 1.首先同一个vue实例来调 ...
- 每天一点点之vue框架开发 - vue-router路由在循环中携带参数
场景:要实现一个标签云,通过循环把标签渲染,然后单击标签的时候实现跳转,跳转路由一样,通过唯一参数来实现请求不同的数据 因此,就需要在for循环中来携带参数,本节所讲的是路由使用对象的形式(别名)来实 ...
- 每天一点点之vue框架开发 - History 模式下线上路由报404错误
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...
随机推荐
- EJS 高效的 JavaScript 模板引擎
什么是 EJS? "E" 代表 "effective",即[高效].EJS 是一套简单的模板语言,帮你利用普通的 JavaScript 代码生成 HTML 页面 ...
- 写给java web一年左右工作经验的人
摘要 大学就开始学习web,磕磕绊绊一路走过来,当中得到过开源社区很多的帮助,总结了这些年来的技术积累,回馈给开源社区. ps:图片都是从网上盗...感谢原作者. ps:文字千真万确都是我自己写的 ...
- Vue + Webpack 根据不同环境打包
修改 prod.env.js // 当前正在运行的脚本名称 const TARGET = process.env.npm_lifecycle_event // 第一个参数 let argv = pro ...
- windows环境批量更改文件名
1.打开命令提示符,进入需更新文件所在的目录下(不熟悉的参考:https://blog.csdn.net/u012995964/article/details/53119516)2.批量命名 ...
- MongoDB安装+基础操作
MongoDB 一. 安装 这里展示使用docker安装mongoDB 拉取最新MongoDB镜像 docker pull mongo 运行容器 docker run -itd --name mong ...
- LInux的服务器编码格式的查看与更改
1.locale 命令查看字符编码 然后修改/etc/sysconfig/i18n,如改成中文编码: LANG=en_US.UTF-8 改为 LANG="zh_CN.GBK" 然后 ...
- http协议请求报文与响应报文分析
什么是HTTP协议: HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到 不断地完善和扩展.目前在WWW中使用 ...
- java基础知识(1)
Java包 包主要用来对类和接口进行分类.当开发Java程序时,可能编写成百上千的类,因此很有必要对类和接口进行分类. Import语句 在Java中,如果给出一个完整的限定名,包括包名.类名,那么J ...
- Day7 - C - Saddle Point ZOJ - 3955
Chiaki has an n × m matrix A. Rows are numbered from 1 to n from top to bottom and columns are numbe ...
- NO4 find&mv-&-特殊符号..和.
问题七:退到上一级目录,删除data目录. 解答:cd ..或cd ../ rm -r data或rmdir data#空目录就不需要带-rf,杀鸡不用宰牛刀,rmdir基本要淘汰的命令 ...