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​​