![](https://img-blog.csdnimg.cn/20210124111132512.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue-router
Vue路由的介绍
敢问
书山有路勤为径,学海无涯苦作舟
展开
-
***Vue-router 导航守卫***
Vue-router 导航守卫vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中,导航守卫主要分三种,全局的, 单个路由独享的, 或者组件级的全局前置守卫这个守卫我们主要用来判断登陆验证,如果当前的用户没有进行登陆,我们可以跳转到登陆页等等router.beforeEach((to, from, next) => { })to: Route: 即将要进入的目标 路由对象 from: Route: 当前导航正要离开的原创 2021-01-25 17:29:01 · 88 阅读 · 0 评论 -
Vue-router 路由重定向
如果手输入路由的过程中,没有匹配到对应的页面,此时应该抛出一个404无页面的状态新建一个 error.vue 作为404的内容页面配置一个路由 index.js中{ path:'/404', name:'404', component:()=> import('@/views/error')},{// *指的是匹配所有没有匹配到的页面 path:'*',// 重定向,重定向到404的路由 redirect: '/404'}*代表的是任原创 2021-01-25 17:01:37 · 1118 阅读 · 0 评论 -
***Vue-router 跳转模式hash和history***
vue-router的跳转主要有两种方式hash和historyhash即地址栏URL中的#号,比如http://mashibing/#/home这种路由就是hash路由,hash虽然后出现在url中,但是不会被包括在HTTP请求中,对后端没有影响history利用了HTML5的History Interface 中新增的pushState()和replaceState(),借鉴出的vuehistory模式,如果你需要配置history模式,必须要和后端进行统一,否则会出现404如果配置hash原创 2021-01-24 19:42:52 · 647 阅读 · 0 评论 -
Vue-router 编程式导航
编程式导航是通过js进行导航驱动,之前声明式是通过点击元素进行跳转基本使用<template><div> <div class="box"> <div class="left" @click="toHome"> 首页 </div> <div class="right" @click="toSport"> 体育原创 2021-01-24 19:40:25 · 124 阅读 · 0 评论 -
***Vue-router 路由别名配置***
根目录新建文件 vue.config.jsconst path = require("path")function resolve(dir) { return path.join(__dirname, dir)}module.exports = { chainWebpack: (config) => { // 第一参数@$代表别名,第二个参数代表替代的开始路径 config.resolve.alias.set("@s", resolve('.原创 2021-01-24 19:23:41 · 379 阅读 · 0 评论 -
Vue-router 路由懒加载
路由懒加载也叫延迟加载现在路由使用情况import Home from '../views/Home.vue'import Sport from '../views/Sport.vue'let router = new VueRouter({ routes: [{ // 路由地址 path: '/home', // 对应的路由显示的组件 component: Home },原创 2021-01-24 19:19:36 · 125 阅读 · 0 评论 -
Vue-router 路由参数
1、path 和 query下面的代码router-link的to参数,是一个地址<router-link to='home'>点击跳转到home</router-link>可以通过to参数传入一个对象<router-link :to="{path:'/home',query:{a:1,b:2,c:3}}">点击跳转到home</router-link>query接收的是一个对象,内部的是配置的参数2、name和pa...原创 2021-01-24 19:16:35 · 453 阅读 · 0 评论 -
Vue-router 路由嵌套
例:页面中一级导航 首页+ 新闻 +体育二级导航 :首页 > 关于我们+ 联系我们体育> 足球 + 篮球 + 排球三级导航:联系我们> 北京 + 上海在路由参数中怎加一个children属性,值是一个数组,数组内部是一个个路由 JSON数据。children内部是二级路由的参数,和一级的配置是一样的,所以,如果需要三级路由,还可以继续设置children,无限嵌套。index.jsimport Vue from 'vue'import VueRout..原创 2021-01-24 19:01:40 · 935 阅读 · 0 评论 -
Vue 路由重复点击报错问题
如果重复点击路由跳转的时候会遇到报错的情况在vue-router的配置怎加以下代码 便可以解决router > index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'Vue.use(VueRouter)const originalPush = VueRouter.prototype.push VueRouter.pr..原创 2021-01-24 11:33:17 · 346 阅读 · 3 评论 -
Vue-router $router和$route
$router 是 VueRouter的实例,对象包括了vue-router 使用的实例方法,还有实例属性,说白了 $router有设置的含义,比如设置当前的跳转、当前的返回......go,back,forward方法goBack1(){ this.$router.go()}goForward(){ this.$router.forward()},goBack(){ this.$router.back()}$router.go()指的是跳转history原创 2021-01-24 11:28:25 · 222 阅读 · 1 评论 -
Vue-Router 路由基本使用
Vue-Router 官网官方介绍Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式,在 IE9 中自动降级 自定义的滚动条行为npm 安装 npm install --sav...原创 2021-01-23 11:45:43 · 303 阅读 · 2 评论