vueRouter基础
vueRouter基础
w-somebody
这个作者很懒,什么都没留下…
展开
-
vue 路由监听的方式
在开发vue项目的过程中,经常会对某些页面或全局项目的路由进行监听,当路由发生变化的时候去执行某些操作,下面是对监听路由的几种方式的总结目录路由监听方式1: 通过 watch 进行监听路由监听方式2:通过钩子函数 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave进行监听路由监听方式3:全局路由监听 this.$router.beforeEach路由监听方式1: 通过 watch 进行监听// 方式1、监听路由 $route 变化export .原创 2021-12-29 16:30:26 · 30955 阅读 · 4 评论 -
vue-router 命名视图案例
有的时候想在页面中同时展示多个视图,而不是切换形式的嵌套展示,这个时候拥有多个出口的router-view就能很方便的实现;现在有这么一个场景:有一个一个页面由左侧侧边栏tab页组成,右边是对应tab所显示的内容,其中一个tab的内容由2个组件构成,那么使用命名视图该如何实现?下面就是实现的过程:1、创建good-children.vue文件<template> <...原创 2019-10-29 15:59:56 · 583 阅读 · 1 评论 -
vue-router 编程式导航
除了使用router-link进行页面的路由切换,还可以通过js编程的方式实现各页面之间的导航在vue实例内部,我们可以通过访问$router来访问路由实例,且提供很多方法进行路由的切换1、this.$router.push(param)方法,参数param可以是字符串也可以是描述地址的对象//push方法会向window里的history加一个记录,类似于window.history....原创 2019-10-29 14:28:42 · 163 阅读 · 0 评论 -
vue-router构建单页面小案例
用 Vue.js + Vue Router 创建单页应用,是非常简单的,本文将以此做个小案例一、创建helloWorld.vue文件<template> <div class="hello"> <p>这是HelloWorld页面</p> <!--使用router-link组件进行导航,to属性来指定path...原创 2019-10-28 15:24:21 · 281 阅读 · 0 评论 -
vue-router安装
一、简述:Vue Router 是Vue.js的官方路由管理器,在配置单页面应用时发挥巨大作用二、安装:1、方法一:直接安装:通过Unpkg.com提供的基于NPM的CDN链接,并在vue后面直接加上<script src="../vue.js"></script><script src="https://unpkg.com/[email protected]/...原创 2019-10-28 11:54:03 · 241 阅读 · 0 评论 -
vue 跳转路由 加载进度条
1,引入npm install --save nprogress2、在main.js文件中import NProgress from ‘nprogress’;import ‘nprogress/nprogress.css’;//在页面跳转使用router.beforeEach((to,from,next) => {//开始进度条NProgress.start();// 继续...原创 2019-06-27 14:11:18 · 1009 阅读 · 0 评论 -
vue-router 动态路由详解
一、动态路由适用于什么场景比如写用户的信息页面时,页面的结构都一样,只是用户的名称不一样,这个时候就可以使用动态路由二、下面写个小案例1、创建用户管理页面testRouter3.vue<template> <div> testRouter3 获取当前该页面的路由参数值为:{{$route.params.id}} </div>&l...原创 2019-10-28 17:43:14 · 5980 阅读 · 0 评论 -
vue-router通配符的使用
一、简述:1、当你需要匹配任何路径或者某种格式的路径时,就可以利用通配符(*)来实现2、当使用通配符时要注意路由的顺序,一般而言,通配符需要放在路由之后3、当使用通配符时,$route.params里会自动添加一个叫做pathMatch的属性,通过该属性我们可以获得通配符的值二、下面通过一个小案例熟悉一下通过通配符的使用:1、创建test.vue文件<template>...原创 2019-10-28 18:11:13 · 7788 阅读 · 0 评论 -
vue-router 路由重定向与别名解析
重定向的意思就是,当你访问/a路由的时候,URL会替换成/b路由,具体可以看下面例子1、创建test1.vue<template> <div> test1页面 </div></template><script>export default { name: '', data () { retu...原创 2019-10-29 16:46:41 · 473 阅读 · 0 评论 -
命名路由怎么使用
当地址过长时,使用一个名称来标识一个路由会显得尤其方便,下面来通过一个小案例来了解一下命名路由的用法1、创建helloworld.vue<template> <div class="hello"> <h1>{{ msg }}</h1><br> <br> <!--使用router-lin...原创 2019-10-29 14:52:27 · 1333 阅读 · 0 评论 -
vue-router嵌套路由的使用
前言:在实际项目中,一个页面可能有多个组建嵌套而成,通过切换按钮或者tab页的方式进行局部内容的替换,这个时候嵌套路由就发挥了它的优势下面我们通过一个案例来理解嵌套路由在实际项目中可能应用的场景1、创建users.vue文件<template> <div class="box"> <div class="btns"> <r...原创 2019-10-28 19:06:05 · 391 阅读 · 1 评论 -
vue-router配置404页面
1、创建404.vue文件<template> <div> 404页面 </div></template><script>export default { name: '', data () { return {} }, methods:{}}</script><...原创 2019-10-28 16:38:52 · 2173 阅读 · 0 评论