vue-router路由基础
栏目: JavaScript · 发布时间: 5年前
内容简介:1.1 引入路由文件1.2 准备路由需要的组件1.3 创建路由对象, 在这个对象里面配置路由规则
效果类似掘金导航, 导航切换
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 重定向的 字符串路径/路径对象 }} ] }) 复制代码
以上所述就是小编给大家介绍的《vue-router路由基础》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- laravel 基础教程 —— 路由
- Istio路由基础
- vue 路由基础
- 前端路由&webpack基础配置
- [ Laravel 5.7 文档 ] 基础组件 —— 路由
- [ Laravel 5.8 文档 ] 基础组件 —— 路由
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。