vue-router

安装vue-router

对应项目打开终端输入"npm install vue-router --save"

./src/router/index.js文件中的内容：

redirect :重定向
mode:“history” 模式改为"history"模式
linkActiveClass:“router-link-active” (所有组件活跃时附加的class类名)
路由懒加载(对JS代码进行分包,用到时自动请求加载)
- const Home = ()=>import("…/components/Home.vue")
路由嵌套
- router模块某个路由内
  - children:[{path:“news”,component:News},{path:"",redirect:“news”},{}]
- 父组件内
  - 新闻
路由导航守卫(路由跳转中的一些操作)
- 全局导航守卫(router模块内)
  - router.beforEach((to,from,next)=>{ document.title = to.matched[0].meta.title; next();});
  - router.afterEach((to,from)=>{ console.log(“路由跳转完成”)});
- 路由独享守卫(router模块内的某个route内)
  - {path:’/XX’,conponent:XX,beforEnter:(to,from,next)=>{…}}
- 组件内守卫(组件的vue实例中)
  - {data(){return {…}}, beforeRouteEnter(to,from,next){//在渲染该组件的对应路由被confirm前调用}}
  - {data(){return {…}}, beforeRouteUpdate(to,from,next){//当路由改变,但该组件被复用时调用}}
  - {data(){return {…}}, beforeRouteLeave(to,from,next){//导航离开该组件的对应路由调用}}
./src/router/index.js文件实例：

import Vue from 'vue'
import VueRouter from 'vue-router' //1,引入vue-router第三方模块Vue.use(VueRouter) //2,挂载中间件//3,配置路由映射表
const routes = [{path: '/fans-and-integral',name: '粉丝和积分',component: FansAndIntegral,meta: {title: '粉丝和积分' + mainTitle,iswechat: true}},{path: '/login',redirect: '/'},{path: '/home',redirect: '/'},{path: '/auth',redirect: '/setting'},{path: '*', // 此处需特别注意至于最底部redirect: '/' // 临时重定向到主页}
]// 4,创建路由容器并设置相关配置
const router = new VueRouter({mode: 'history',routes,scrollBehavior(to, from, savedPosition) {// return { x: 0, y: 0 }return {x: 0,y: to.meta.scrollTop || 0}; //进入该页面时，用之前保存的滚动位置赋值}
})export default router; // 5,导出路由容器,App.vue的vue实例上(new Vue({ router:router }))挂载路由容器
/* 6,使用：1,全局组件<router-link :to="{name:'Home'}" tag="button"></router-link> 2,<router-view/> 3,<keep-alive><router-view/></keep-alive> 4,this.$router.push("/")*/

./src/App.vue入口组件与其它组件内

(主要功能是进行本地路由跳转)
- to="/XX" :本地路由跳转到 “/XX”
- tag=“button” :此组件被渲染成"button"标签
- replace :replace不留下history路由记录,不能访问上一级
- active-class =“router-link-active” 本组件活跃时附加的class类名
(路由跳转对应组件的渲染位置)
(保持路由跳转使用过的组件的活性)
- 组件的vue实例内(组件被包裹时,activated和deactivated函数被允许使用)
  - activated(){//被保持活性时调用}
  - deactivated(){//不再被保持活性时调用}
- include=“组件vue实例的name属性值,name1,name2” //允许保持活性的组件名
- exclude=“组件vue实例的name属性值,name1,name2” //不允许保持活性的组件名
所有组件的内(所有的组件都继承vue类,vue.prototype.$router = ()=>{import router from “./router/index.js” ); return router; }
- this.$router (./src/router/index.js导出的router容器对象被全局挂载到vue实例上了)
  - this.$router.push("/XX") :本地路由跳转到"/XX",保存路由记录
  - this.$router.replace("/XX") :本地路由跳转到"/XX",不作路由记录
- this.$route (./src/router/index.js导出的router容器对象中的当前活跃路由被全局挂载到vue实例上了)
  - this.$route.params.x1可以读取到x1被赋值的内容
  - this.$route.query.x1可以读取到组件传给路由的参数

组件与router/index.js之间的交互

动态路由（动态改下path内容）
- router模块内
  - path:"/home/:x1"
- 对应组件内
  - <router-link :to= “’/home/’+data1”></router-link>
- 其它组件内
  - this.$route.params.x1可以读取到x1被赋值的内容
组件的参数传递给路由
- router模块内
  - 正常写
- 对应组件内
  - <router-link :to= “{ path:’/home’,query:{x1:‘XX’,x2:‘XX’,} }”></router-link>
  - this.$router.push({path:"/home",query:{x1:“XX”,x2:“XX”}})
- 其它组件内
  - this.$route.query.x1

@沉木

vue-router路由详细笔记相关推荐

Vue Router的详细教程
Vue Router的详细教程安装 #直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js Unpkg.com 提供了基于 NPM 的 ...
Vue Router路由常用功能总结
Vue Router路由常用功能总结一.前言二.安装 1. vueCLI安装 2. npm安装三.路由配置及使用: 1. 基本配置: 2. 动态路由: 3. 嵌套路由: 四.编程式的导航五.重 ...
Vue 学习(十、 Vue Router - 路由插件和 Vue 的插件原理)
文章目录一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...
Vue Router 路由管理
文章目录 Vue Router 路由管理概述安装简单使用定义2个组件定义路由信息支持路由使用路由动态路由配置动态路由配置404 限制动态参数嵌套路由命名路由编程式导航简单使 ...
【Vue】相关生态——Vue Router路由
Vue Router路由基本使用带参数的动态路由匹配捕获所有路由或404 Not found 路由嵌套路由编程式导航重定向和别名将props传递给路由组件不同的历史模式进阶导航守卫 ...
Vue.js 3.0 学习笔记（十一）Vue Router路由
一.使用Vue Router 1.HTML页面使用路由 <!DOCTYPE html> <html> <head><meta charset="UT ...
Vue | Vue Router 路由的使用
文章目录一.路由的基本使用 1.创建 Vue 项目并引入 vue-router 2.编写 Components 组件 3.编写路由文件 4.在主文件 Main.js 中引入路由 5.添加 route ...
Vue Router 路由导航
Vue Router 通过 Vue.js,我们已经用组件组成了我们的应用.当加入 Vue Router 时,我们需要做的就是将我们的组件映射到路由上,让 Vue Router 知道在哪里渲染它们. V ...
Vue Router路由模式的区别进程线程的区别
Vue Router hash模式和history模式的区别 hash模式url里面永远带着#号,我们在开发当中默认就是hash模式. 那么什么时候需要用到history模式呢? 肯定是用户觉得#号太 ...

vue-router路由详细笔记

vue-router

安装vue-router

./src/router/index.js文件中的内容：

./src/App.vue入口组件与其它组件内

组件与router/index.js之间的交互

@沉木

vue-router路由详细笔记相关推荐

最新文章

热门文章