Vue详解设置路由导航的两种方法
2019-05-06 11:25
639 查看
一、方法1:
<router-link :to="......">
to里的值可以是一个字符串路径,或者一个描述地址的对象。例如:
// 字符串 <router-link to="apple"> to apple</router-link> // 对象 <router-link :to="{path:'apple'}"> to apple</router-link> // 命名路由 <router-link :to="{name: 'applename'}"> to apple</router-link> //直接路由带查询参数query,地址栏变成 /apple?color=red <router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link> // 命名路由带查询参数query,地址栏变成/apple?color=red <router-link :to="{name: 'applename', query: {color: 'red' }}"> to apple</router-link> //直接路由带路由参数params,params 不生效,如果提供了 path,params 会被忽略 <router-link :to="{path: 'apple', params: { color: 'red' }}"> to apple</router-link> // 命名路由带路由参数params,地址栏是/apple/red <router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>
二、方法2:
router.push("......")
括号里的值可以是一个字符串路径,或者一个描述地址的对象。规则和上面方法1一样。例如:
// 字符串 router.push('apple') // 对象 router.push({path:'apple'}) // 命名路由 router.push({name: 'applename'}) //直接路由带查询参数query,地址栏变成 /apple?color=red router.push({path: 'apple', query: {color: 'red' }}) // 命名路由带查询参数query,地址栏变成/apple?color=red router.push({name: 'applename', query: {color: 'red' }}) //直接路由带路由参数params,params 不生效,如果提供了 path,params 会被忽略 router.push({path:'applename', params:{ color: 'red' }}) // 命名路由带路由参数params,地址栏是/apple/red router.push({name:'applename', params:{ color: 'red' }})
三、注意点
1.带参数的路由总结如下:
①无论是直接路由“path" 还是命名路由“name”,带查询参数query,地址栏会变成“/url?查询参数名:查询参数值“;
②直接路由“path" 带路由参数params, params 不生效;
命名路由“name" 带路由参数params 地址栏保持是“/url/路由参数值”;
2.设置路由map里的path值:
带路由参数params时,路由map里的path应该写成: path:’/apple/:color’ ;
带查询参数query时,路由map里的path应该写成: path:’/apple’ ;
3.获取参数方法:
在组件中: {{$route.params.color}} 在js中: this.$route.params.color
相关文章推荐
- Vue-详解设置路由导航的两种方法: <router-link :to="..."&mt; 和router.push(...)
- vue-router之nuxt动态路由设置的两种方法小结
- Vue.js路由组件vue-router使用方法详解
- 关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
- Vue---导航守卫使用方法详解
- iOS 设置导航透明的两种方法
- Vue.js框架路由使用方法实例详解
- vue 设置路由的登录权限的方法
- 详解vue组件中使用路由方法
- vue获取DOM元素并设置属性的两种实现方法
- vue路由配置及两种路由跳转方法
- 详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
- vue二级路由设置方法
- Vue路由传值的两种方法:动态路由与get传值
- Vue-路由导航菜单栏的高亮设置方法
- iOS 设置导航透明的两种方法
- iOS 设置导航透明的两种方法
- vue 挂载路由到头部导航的方法
- 详解vue.js下引入百度地图jsApi的两种方法
- Vue.js路由vue-router使用方法详解