Vue-详解设置路由导航的两种方法

一、

to里的值可以是一个字符串路径，或者一个描述地址的对象。例如：

router.js:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/Login'

Vue.use(Router)

export default new Router({
    routes: [
    {
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld
    },
    {
        path: '/login',
        name: 'Login',
        component: Login
    }]
})

.vue组件中：

// 字符串
<router-link to="login"> to applerouter-link>

// 对象   path是router.js中的path
<router-link :to="{path:'/login'}"> to applerouter-link>

// 命名路由  name是router.js中的name
<router-link :to="{name: 'Login'}"> to applerouter-link>

// 地址栏变成 /apple?color=red
// 通过 {{$route.query.color}} 或 this.$route.query.color 获取参数
<router-link :to="{path: '/login', query: {color: 'red' }}"> to applerouter-link>

// 地址栏变成 /login?color=red
// 通过 {{$route.query.color}} 或 this.$route.query.color 获取参数
<router-link :to="{name: 'Login', query: {color: 'red' }}"> to applerouter-link>

// 无法获取参数
<router-link :to="{path: '/login', params: { color: 'red' }}"> to applerouter-link>

// 地址栏变成 /login/red
// 通过 {{$route.params.color}} 或 this.$route.params.color 获取参数
<router-link :to="{name: 'Login', params: { color: 'red' }}"> to applerouter-link>

---

二、router.push(...)

同样的规则也适用于router.push(…)方法

// 字符串
router.push('/login')

// 对象
router.push({path:'/login'})

// 命名路由
router.push({name: 'Login'})

//地址栏变成 /login?color=red
// 通过 {{$route.query.color}} 或 this.$route.query.color 获取参数
router.push({path: '/login', query: {color: 'red' }})

// 地址栏变成/login?color=red
// 通过 {{$route.query.color}} 或 this.$route.query.color 获取参数
router.push({name: 'Login', query: {color: 'red' }})

// 无法获取参数 
router.push({path:'/login', params:{ color: 'red' }})

// 地址栏变成 /login/red
// 通过 {{$route.params.color}} 或 this.$route.params.color 获取参数
router.push({name:'Login', params:{ color: 'red' }})

---

总结

1、 关于带参数的路由总结如下：

1. 带查询参数query时：
   无论是直接路由path 还是命名路由name，地址栏会变成/login?color=red；
2. 带路由参数params时：
   若是直接路由path 则 params 携带参数不生效，无法获取；
   若是命名路由name 则可正常获取参数，地址栏会变成/login/red；

2、设置路由map里的path值(router.js)：

1. 带查询参数query时，path不用改

 {
   path: '/login',
   name: 'Login',
   component: Login
}

2. 带路由参数params时，path应该写成:

 {
   path: '/login/:color',
   name: 'Login',
   component: Login
}

3、获取参数方法：

1. 在组件中：
   {{$route.query.color}}
{{$route.params.color}}

2. 在js里：
   this.$route.query.color
this.$route.params.color

---

设置参数

.vue文件

<dl>
	<dt>产品及服务dt>
	<router-link tag="dd" :to="{ name: 'Serve', params: { id: '1' }}">平台1router-link>
	<router-link tag="dd" :to="{ name: 'Serve', params: { id: '2' }}">平台2router-link>
	<router-link tag="dd" :to="{ name: 'Serve', params: { id: '3' }}">平台3router-link>
	<router-link tag="dd" :to="{ name: 'Serve', params: { id: '4' }}">平台4router-link>
dl>

router/index.js文件

var router = new Router({
routes: [{
	path: '/serve/:id?',
	name: 'Serve',
	component: Serve
}]

获取参数

activated() {
    console.log(this.$route.params.id);
}