vue路由

一.首先安装Vue CLI后，在脚手架文件夹view或components下创建组件，接着在router文件夹的index.js中进行配置 1.import ‘自定义组件名’ from ‘组件路径’，引入组件 比如 import maps from '@/views/maps.vue'（@代表src根目录） 2.然后为每个组件指定路径,如果有二级路由，在childern里继续配置 import maps from '@/views/maps.vue' import section from '@/views/section.vue' import finance from '@/views/finance.vue' Vue . use ( VueRouter ) const routes = [ { path : '/maps' , component : maps , children : [ { path : '/maps/section' , component : section } ] } , path : '/finance' , component : finance , ] 3，要切记的是，二级路由配置完后，要在maps组件里为section组件留个路由容器 < router - view > < / router - view > 二、声明式路由和编程式路由跳转

什么是路由 对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源； 对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现； 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）； 在 vue 中使用 vue-router 路由的基本使用包括以下几步： 引入 vue-router.js ，也可以通过 npm 安装，后面再介绍 创建模板对象 创建一个路由对象， 当导入 vue-router 包之后，在 window 全局对象中，就有了一个路由的构造函数，叫做 VueRouter ，在 new 路由对象的时候，可以为构造函数，传递一个配置对象。配置对象中的 routes 表示 路由匹配规则 ，每个路由规则，都是一个对象，这个规则对象身上，有两个必须的属性： path 表示监听的路由链接地址； component 表示，如果路由是前面匹配到的 path ，则展示 component 属性对应的那个组件，注意： component 的属性值，必须是一个 组件的模板对象， 不能是 组件的引用名称。 router: routerObj 将路由规则对象，注册到 vm 实例上，用来监听

在 Vue 官方文档中提到，当使用路由参数时，例如从 /user?id=1 导航到 /user?id=2 ， 原来的组件实例会被复用 。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。 不过，这也意味着组件的生命周期钩子不会再被调用。 但是有时候确实需要通过刷新界面渲染不同的数据，官方也给出了两种方法决绝组件复用的问题。 watch (监测变化) $route 对象： < script > export default { ... watch : { '$route' ( to , from ) { // 对路由变化作出响应... } } } < / script > beforeRouteUpdate 导航守卫： < script > export default { ... beforeRouteUpdate ( to , from , next ) { // react to route changes... // don't forget to call next() } } < / script > 这两种方法在路由发生变化时，可以发送网络请求，将请求的数据渲染到页面中，因为 Vue 是一个响应式框架，当数据发生改变，界面的数据也发生改变。 来源： CSDN 作者： 夜空中最亮的星 链接： https://blog.csdn.net/weixin

vue跳转时路由相同但参数不同 问题 解决 方案一：watch 方案二：beforeRouteUpdate 问题 在开发vue项目中遇到一个问题：两个导航共用一个显示界面，我打算通过路由传参的形式进行区别，利用vue的钩子，调用不同的查询接口： // 错误示范 this . $router . push ( { //导航一 path : "/logindex" , name : 'logindex' , params : { logType : 1 } } ) ; this . $router . push ( { //导航二 path : "/logindex" , name : 'logindex' , params : { logType : 2 } } ) ; 但是我发现在两个导航之前切换时，vue不会重新加载组件，进而无法调用生命周期中的钩子，就导致页面数据无法更新。 解决 方案一：watch 第一步：改造路由 { path : '/logindex/:logType' , name : 'logindex' , component : ( ) => import ( '@/page/Logindex.vue' ) } 跳转 this . $router . push ( { //导航一 path : "logindex:logType" , name :

Vue中的路由 什么是路由 vue里面的特性。和路由器的功能差别，点击一个路由，定位到一个地方； url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个 资源。路由不包含子啊vue中，是一个插件，需要单独下载。 官方地址: link . 使用路由前引入路由 在js中定义路由； < script src = "node_modules/vue-router/dist/vue-router.js" > < / script > idea中要自己去下载路由；在idea中输入： npm install vue-router 路由的使用 demoCode < body > < div id = "app" > < h1 > 路由。。 < / h1 > < p > < ! -- 使用 router - link 组件来导航 . -- > < ! -- 通过传入 `to` 属性指定链接 . -- > < ! -- < router - link > 默认会被渲染成一个 ` < a > ` 标签 -- > < router - link to = "/tt" > 涛涛个人空间 < / router - link > < router - link to = "/ll" > 亮亮的后花园 < / router - link > < router - link to = "/cc"

结构图 一、前言 在上一篇 vue-router总结 -- 基础使用 中，简单介绍了vue-router的安装、引用、嵌套路由、路由传参和重定向等内容，这是系列的第二篇，主要总结一下路由钩子函数的使用方法和一些常见的使用场景。 二、三大类钩子函数 路由钩子函数就是在发生路由跳转时，在每个时机调用的函数。这些函数分为三大类： 1.全局钩子函数 全局钩子函数有两个： beforeEach 和 afterEach ，由路由实例调用执行。 (1) beforeEach 进入路由之前被调用，通常进行判断登录状态、鉴权等操作。 应用：登录拦截，部分地方使用伪代码形式（因为懒啊） import Vue from 'vue' import Router from 'vue-router' import Home from './components/Home' import About from './components/About' Vue.use(Router) const router = new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About, meta: { auth: true // 该路由需要登录权限

嵌套路由 当我们不满足与 /home这种路由，而是希望通过 /home/news和/home/message访问一些内内容 那么就需要嵌套路由了 实现嵌套路由有两个步骤： ·创建对应的子组件，并且在路径映射中配置对应的子路由（注意：路由的定义也需嵌套）　　　　　　 ·在组件内部使用<router-view>标签 　　　　　　 　　　　　　 　　　　最后。在浏览器的地址栏就是这种形式了 　　 query传值 　　之前我们传值，是通过/user/3这种param形式。 　　但是，当我们的需求发生变化，传的值的个数增加时，就需要用到query形式的传值了(/user?name=tom&age=3) 　　·定义传值 　　 　　·接受传值（为什么这里用$route?因为route用的是当前路由对象） 浏览器展示为： 来源： https://www.cnblogs.com/cl94/p/12363528.html

Vue Router 组件嵌套和路由嵌套是一一对应关系 默认子路由： 1、父路由上不加 name 字段，加在子路由上； 　　　　　　2、或者 默认子路由上 path:""; 路由的精确匹配： 　　<router-link to="/user" exact></router-linke> 修改路由默认类： 　　linkActiveClass linkExactActiveClass 路由重定向，路由跳转 　　redirect 路由别名 　　路由的匹配规则 依然是 path； 　　别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构 组件内守卫 　　beforeRouteEnter 在渲染该组件的对应路由被 confirm 前调用,组件实例没有被创建（this不能用） 　　beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用（foo/1 ---> foo/2, foo组件被复用，调用） 　　beforeRouteLeave 导航离开该组件的对应路由时调用 404页面配置 　　{path："*",component:404Component} 　　path匹配规则 为 星，任意的 　　放在路由记录的末尾 路由组件 　　直接和路由绑定的组件称为路由组件 　　路由组件才能访问 路由对象： router route 　

原文地址 this.$router.push跳转 现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。 父组件中： <li v-for="article in articles" @click="getDescribe(article.id)"> methods： 方案一： getDescribe(id) { // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${id}`, }) 方案一，需要对应路由配置如下： { path: '/describe/:id', name: 'Describe', component: Describe } 很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。 this.$route.params.id 方案二： 父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。 this.$router.push({ name: 'Describe', params: { id: id } }) 对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。 { path: '/describe',

目录 目录 1.vue-router 是什么? 2.如何使用v-router? 3.vue-router跳转和传参 4.vue-router实现的原理 两种模式 5.vue-router 有哪几种导航钩子? 6.$route 和 $router 的区别 7.vue-router响应路由参数的变化 8.vue-router实现路由懒加载（ 动态加载路由 ） 目录 引言：该篇主要讲的是关于vue-router的原理以及使用等问题，以及面试中常被问到的几个点，有部分还未整理后续会继续更新； 1.vue-router 是什么? Vue-router就是WebApp的链接路径管理系统。vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的，适合用于构建单页面应用 在之前常用的是用a标签进行跳转，现在做的是单页面应用，所以必须使用v-router进行管理 2.如何使用v-router? 1. 下载 cnpm i vue-router -S 2.在index.js中引入路由的核心模块 import VueRouter from 'vue-router' 3.注册路由插件 Vue.use(VueRouter) 4.创建路由对象并且配置路径 这里有两种情况， 一级路径 例如 "/film"可以如下写法即可，表示跳转/cinema页面渲染Cinema组件 注意：别忘了引入该组件