vue-router路由基础
1. 路由初体验
效果类似掘金导航, 导航切换
1.1 引入路由文件
<script src="./vue-router.js"></script>
复制代码
1.2 准备路由需要的组件
var index = Vue.component('index',{template:'<div>首页</div>'
})
var productType = Vue.component('productType',{template:'<div>这里显示商品编号</div>'
})
复制代码
1.3 创建路由对象, 在这个对象里面配置路由规则
const router = new VueRouter({})
复制代码
1.4 通过routes属性配置路由规则,
他是一个数组, 数组中放的是对象, 每个对象对应一条规则,
并且每个对象里面都含有name(表示路由规则名称)/path(表示路径)/component(表示路径对应的组件)属性
const router = new VueRouter({routes:[{name:'index', path:'/index', component:index},{name:'productType', path:'/product_type', component:productType}]
})
复制代码
1.5 在vue实例中注入路由, 这样整个应用程序都会拥有路由了
var vm = new Vue({el: '#app',// 5. 在vue实例中注入路由, 这样整个应用程序都会拥有路由了router,data: {}
})
复制代码
1.6 通过router-view挖坑, 路径匹配到的组件都会渲染到这个组件来
<div id="app"><router-view></router-view>
</div>
复制代码
1.7 vue路由中通过router-link去做跳转, 他有一个to属性, to属性的值必须和path中的值对应
router-link将来会被渲染成为a标签, 他的to属性会被渲染成a标签的href属性, 但它的值前面会加一个#,变为锚点
<div id="app"><ul><li><router-link to="/index">首页</router-link></li><li><router-link to="/product_type">蔬菜</router-link></li><li><router-link to="/product_type">水果</router-link></li><li><router-link to="/product_type">肉类</router-link></li></ul><router-view></router-view>
</div>
复制代码
2. 路由参数
2.1 router传递参数
<div id="app"><ul><li><router-link to="/index">首页</router-link></li><li><router-link to="/product_type/11">蔬菜</router-link></li><li><router-link to="/product_type/22">水果</router-link></li><li><router-link to="/product_type/33">肉类</router-link></li></ul><router-view></router-view>
</div>
复制代码
const router = new VueRouter({routes:[{name:'index', path:'/index', component:index},{name:'productType', path:'/product_type/:id', component:productType}]
})
复制代码
2.2 接收参数
2.2.1 组件接收参数
在html中获取路由参数, 通过$route.params.参数名
var productType = Vue.component('productType',{//在html中获取路由参数, 通过$route.params.参数名template:'<div>这里显示商品编号{{$route.params.id}}</div>',
})
复制代码
2.2.2 js接收参数
在js中获取路由参数, 通过this.$route.params.参数名
var productType = Vue.component('productType',{//在html中获取路由参数, 通过$route.params.参数名template:'<div>这里显示商品编号{{$route.params.id}}</div>',//模板编译完成之后调用mounted() {//在js中获取路由参数, 通过this.$route.params.参数名console.log(this.$route.params.id)},
})
复制代码
3. 响应路由参数的变化
提醒一下,当使用路由参数时,例如从 /user/foo
导航到 /user/bar
,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。
3.1 复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch (监测变化) $route
对象:
var productType = Vue.component('productType',{data(){return {allProduct:''}},//在html中获取路由参数, 通过$route.params.参数名template:`
<div>
这里显示商品编号{{$route.params.id}}
<p>{{allProduct}}</p>
</div>
`,//模板编译完成之后调用mounted() {//在js中获取路由参数, 通过this.$route.params.参数名console.log(this.$route.params.id)},watch: {//to表示你将要去的路由对象, from表示你从哪个路由来'$route'(to,from){console.log(to)console.log(from)if(to.params.id==='11'){this.allProduct = '葫芦不等等'}else if(to.params.id==='22'){this.allProduct = '西瓜'}else{this.allProduct = '猪肉/牛肉'}}}
})
复制代码
3.2 或者使用 2.2 中引入的 beforeRouteUpdate
导航守卫:
const User = {template: '...',beforeRouteUpdate (to, from, next) {// react to route changes...// don't forget to call next()}
}
复制代码
4. 嵌套路由和编程式导航
嵌套路由
4.1 嵌套路由
4.1.1 嵌套路由创建
const router = new VueRouter({routes:[{name:'index', path:'/index', component:index},{name:'productType', path:'/product_type/:id', component:productType,children:[//嵌套中的path不能加'/'{name:'cookBook', path:'cook_book',component:cookBook}]}]
})
复制代码
var cookBook = Vue.component('cookBook]',{template:'<div>我这里很多食谱, 欢迎查看</div>'
})
复制代码
4.1.2 在被嵌套的组件中占坑''
var productType = Vue.component('productType',{ template:`<div>这里显示商品编号{{$route.params.id}}<p>{{allProduct}}<button @click='jumpTo'>查看食谱</button></p><router-view></router-view></div>`
})
复制代码
4.2 编程式导航
通过 '<button @click='jumpTo'>查看食谱' 跳转
var productType = Vue.component('productType',{ template:`<div>这里显示商品编号{{$route.params.id}}<p>{{allProduct}}<button @click='jumpTo'>查看食谱</button></p><router-view></router-view></div>`
})
methods: {jumpTo(){//通过$router来跳转this.$router.push({name:'cookBook'})}
},
复制代码
5. 路由重定向
重定向也是通过
routes
配置来完成
{name:'default',path:'*',redirect: '/index'},
复制代码
重定向的目标也可以是一个命名的路由:
{name:'default',path:'*',redirect: {name:'index'}}
复制代码
甚至是一个方法,动态返回重定向目标:
const router = new VueRouter({routes: [{ path: '/a', redirect: to => {// 方法接收 目标路由 作为参数// return 重定向的 字符串路径/路径对象}}]
})
复制代码
转载于:https://juejin.im/post/5cc5750851882524f96d0081
vue-router路由基础相关推荐
- Vue 前端路由基础
Vue 前端路由基础 何为路由? 在现代前端开发中,路由是非常重要的一环.但路由到底是什么呢? 对于前后端来说,路由就是URL到函数的映射.通俗地来说,这是从路由的实现原理上来解释路由的(就好比计算机 ...
- Vue Router路由常用功能总结
Vue Router路由常用功能总结 一.前言 二.安装 1. vueCLI安装 2. npm安装 三.路由配置及使用: 1. 基本配置: 2. 动态路由: 3. 嵌套路由: 四.编程式的导航 五.重 ...
- Vue Router 路由管理
文章目录 Vue Router 路由管理 概述 安装 简单使用 定义2个组件 定义路由信息 支持路由 使用路由 动态路由 配置动态路由 配置404 限制动态参数 嵌套路由 命名路由 编程式导航 简单使 ...
- 【Vue】相关生态——Vue Router路由
Vue Router路由 基本使用 带参数的动态路由匹配 捕获所有路由或404 Not found 路由 嵌套路由 编程式导航 重定向和别名 将props传递给路由组件 不同的历史模式 进阶 导航守卫 ...
- Vue 学习(十、 Vue Router - 路由插件 和 Vue 的插件原理)
文章目录 一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...
- 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的项目,我们最常见使用的就是Vue配套的Vue Router库. 那么在平日开发中,有多少种跳转路由的方法? 二.跳转方法 1.使用router-link标签 使用router- ...
最新文章
- Asp.net Mvc 多级控制器 路由重写 及 多级Views目录 的寻找视图的规则 (多级路由) 如:Admin/Test/Index...
- 允许修改 SharePoint2010 中的电子邮件
- 1105 Spiral Matrix (25 分)【难度: 一般 / 知识点: 模拟】
- python的flask实现接口_Flask快速实现简单python接口
- php redis 扩展 常用方法
- ROS actionlib学习(一)
- js中的转译_JavaScript中的填充和转译
- 缓存问题引发的一系列优化
- NUC1196 Sum【水题+数学题】
- Linux终端下输出二维码
- 使用Python一键获取百度网盘提取码
- pycharm主题背景图片设置,让你的界面酷起来!
- Ardunio程序设计基础 一
- 2000-2020年上市公司制造业数据/制造业上市公司数据
- 投影机基本故障及解决方法
- ANDROID 学习笔记(三) UI THREAD AsyncTask 使用
- 网络基础知识 第一章上
- 致谢词大全字C语言,致谢词范文
- 史上公认的最好学习方法, 学英语者的福利
- 关于QXDM的安装,解决Win7下QIK报错的问题