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
}]
})
组件中：
- 字符串
<router-link to="login">to login</router-link>
<router-link to="/login">to login</router-link>
- 对象
// 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>
- 通过
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>
- 通过
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、 路由携带参数时
- 带查询参数
query时：
无论是直接路由path还是命名路由name，地址栏会变成/login?color=red； - 带路由参数
params时：
若是直接路由path则 params 携带参数不生效，无法获取；
若是命名路由name则可正常获取参数，地址栏会变成/login/red；
2、设置路由map里的path值(router.js)：
- 带查询参数
query时，path不用改
{
path: '/login',
name: 'Login',
component: Login
}
- 带路由参数
params时，path应该写成:
{
path: '/login/:color',
name: 'Login',
component: Login
}
如果这里不设置path: '/login/:color'，也能通过{{$route.params.color}}和this.$route.params.color接收到数据，但地址栏不会变成/login/red，而是/login
- 路由参数非必传时（
: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、获取参数方法：
在组件中：
{{$route.query.color}}或{{$route.params.color}}在 JS 中：
this.$route.query.color或this.$route.params.color
