vue-router

本文转载于: 猿2048 网站➦ https://www.mk2048.com/blog/blog.php?id=h2j2hk0bbb 虽然有很多 router 的相关文章了，但是那又怎么样，我就是要写。 欢迎来我的Vue技术群交流： 887516034 其实vuejs有一个叫做动态组件的东西，效果和路由有点相似，根据需求显示不同的组件，但是在实际使用上，很小气，就给人玩不爽，没办法像路由一样编程式导航( push , replace )，也没有浏览器路径的语义引导，动态组件更适合小规模的局部tab，给大家秀一波用法 <template> <div> ul>li>tab1+tab2 @click="" <!-- >>>此处改变下面data中的tab值就可以切换了 --> <!-- 此处相当于router-link效果，虽然没有浏览器的url引导，但是可以自己写面包屑 --> <component :is="tab"></component> <!-- 这里就是router-view显示区了 --> </div> </template> <script> import tab1 from 'path/to/tab1.vue' //相比vue-router要引入很多文件 麻烦 import tab2 from 'path/to/tab2.vue' //其实vue-router也引入文件

一、编程式导航 　　编程式导航就是使用js实现页面的跳转，而不是直接在<router-link>中实现跳转。 1.1 实现编程式导航 　　实现编程式导航在js中使用this.$router.push ( location, onComplete?, onAbort? )。其中第一个参数就是需要跳转的页面的路径，使用在路由中已经配置好的路径。可以有以下几种方式实现跳转。 // 字符串 //{ path: '/home', component: Home } 路由中已配置homethis.$router.push('home') // 对象 //{ path: '/home', component: Home } 路由中已配置homethis.$router.push({ path: 'home' }) // 命名的路由 //{ path: '/user/:userId', component: User , name: 'user'} 路由中已配置user，并且路由命名为user.this.$router.push({ name: 'user', params: { userId: '123' }}) // 带查询参数，变成 /register?plan=private //{ path: '/register', component: Register }

一、动态路由 　　动态路由可以理解为同一个组件对于路由传过来的值不同，可以实现不同的功能或者显示不同的信息。使用动态路由分为三步，配置路由、在页面使用<router-link>实现页面的跳转、在跳转到的页面使用this.$route.params获取路由传过来的参数 1.1、配置路由 　　一个“路径参数”使用冒号 : 标记，例如 '/newsdetail/:index' ，':index' 实现动态路由， 当匹配到一个路由时，参数值会被设置到 this.$route.params ，可以在每个组件内使用。配置路由如下： 　　 1.2 在页面使用<router-link>实现页面的跳转 　　在页面使用<router-link>实现页面跳转时，路由必须与配置的路由保持一致，如下： 　　 1.3 在跳转的目标页面使用this.$route.params获取参数 　　 1.4 运行项目 　　运行项目后在新闻页面，点击新闻列表中的不同的新闻，可以实现动态的路由，在新闻详情页面可以获取传递的参数 　　 二、get传值 　　get传值和写普通html页面时使用问号?拼接参数的方式一样，在跳转的页面中使用this.$route.query来获取get传值方式传过来的参数 2.1 配置路由 　　get传值配置路由和普通的配置方式一样： 　　 2.2 在页面使用<router-link>实现页面的跳转

I have the following fiddle https://jsfiddle.net/91vLms06/1/ const CreateComponent = Vue.component('create', { props: ['user', 'otherProp'], template: '<div>User data: {{user}}; other prop: {{otherProp}}</div>' }); const ListComponent = Vue.component('List', { template: '<div>Listing</div>' }); const app = new Vue({ el: '#app', router: new VueRouter(), created: function () { const self = this; // ajax request returning the user const userData = {'name': 'username'} self.$router.addRoutes([ { path: '/create', name: 'create', component: CreateComponent, props: { user: userData }}, { path: '/list

　　使用Vue路径实现动态挂载组件。将使用过程步骤化，方便自己后续的使用。快速开始Vue Router的步骤 一、安装Vue Router插件 　　cmd切换到项目目录。执行c npm install vue-router --save。 Vue Router 官网： https://router.vuejs.org/zh/installation.html 　　 二、在main.js中使用Vue Router组件 　　在main.js中添加如下红色框内的代码： 　　 三、配置路由 　　配置路由分为4个步骤： 定义 (路由) 组件、 定义路由、 创建 router 实例、 创建和挂载根实例。这四步可以全部卸载main.js中，也可以使用模块化将这四步单独写在一个模块中，最后import到main.js中挂载 3.1 定义 (路由) 组件 　　路由组件可以是直接定义，也可以是导入已经定义好的组件。这里导入已经定义好的组件。如下 　　 3.2 定义路由（ 路由对象数组 ） 　　定义 路由对象数组 。对象的path是 自定义的路径（即使用这个路径可以找到对应的组件） ，component是指该路由对应的组件。如下： 　　 3.3 实例化Vue Router对象 　　调用Vue Router的构造方法创建一个Vue Router的实例对象，将3.2步定义的路由对象数组作为参数对象的值传入

if keep-alive is specified to router-view as below <keep-alive> <router-view></router-view> </keep-alive> then all routes are effectively cached and reloaded when that route is revisited. I'd like to be able to specify a keep-alive option on individual routes. With many routes and only 1 or 2 that need to be kept alive wihout re-rendering caching all routes is useless is there any method of doing so or any workaround available https://jsfiddle.net/Linusborg/L613xva0/4/ New in Vue version 2.1.0, the include and exclude props for conditionally caching components. Note the use of the name option.

vue-router的两种实现导航的方式： 1.通过<router-link :to="...">实现 ：to指向一个对象{}里面有path,name ,query等属性，可以设置路由导航的路径，传递的参数，组件名称 1 <div id="app"> 2 <!-- 传递参数 的两种方式query//params--> 3 <router-link :to="{path:'login',query:{id:100}}">登录</router-link> 4 <router-link :to="{name:'register',params:{name:'韩信'}}">注册</router-link> 5 <!-- 组件占位 --> 6 <router-view></router-view> 7 </div> 8 11 <script> 12 // 创建两个组价，分别是login,register 13 var login ={ 14 template:"<h3>我是登录组件---参数{{this.$route.query.id}}</h3>", 15 data(){ 16 return{} 17 }, 18 mounted(){ 19 console.log(this.$route.query.id); // 输出 100 20 } 21 } 22 var register ={