Vue路由导航 router-link 和 router.push

文章目录

• router-link
• router.push
• 总结
• • 1、 路由携带参数时
  • 2、设置路由map里的path值(router.js)：
  • 3、获取参数方法：

---

router-link

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
    }]
})

组件中：

1. 字符串

<router-link to="login">to login</router-link>
<router-link to="/login">to login</router-link>

2. 对象

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


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

3. 通过 query 携带参数（地址栏变成 /login?color=red）

// 通过 {{$route.query.color}} 或 this.$route.query.color 获取参数
<router-link :to="{path: '/login', query: {color: 'red' }}"> to login</router-link>


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

4. 通过 params 携带参数（地址栏为/login/red）

// 无法获取参数  
// 报警告（Path "/login" was passed with params but they will be ignored. Use a named route alongside params instead.）
<router-link :to="{path: '/login', params: { color: 'red' }}"> to login</router-link>


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

---

router.push

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

1. 不携带参数

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

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

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

2. 通过 query 携带参数：

// 可通过 {{$route.query.color}} 或 this.$route.query.color 获取参数
router.push({path: '/login', query: {color: 'red' }})

// 可通过 {{$route.query.color}} 或 this.$route.query.color 获取参数
router.push({name: 'Login', query: {color: 'red' }})

3. 通过 params 携带参数：

// 无法获取参数 
router.push({path:'/login', params:{ color: '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
}

如果这里不设置path: '/login/:color'，也能通过{{$route.params.color}}和this.$route.params.color接收到数据，但地址栏不会变成/login/red，而是/login

3. 路由参数非必传时（:id?）：

vue文件

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

router/index.js文件

var router = new Router({
routes: [{
	path: '/serve/:id?', //  :id? => ?问号的意思是该参数不是必传项，不传不会报错
	name: 'Serve',
	component: Serve
}]

3、获取参数方法：

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

2. 在 JS 中： this.$route.query.color 或 this.$route.params.color