vue路由传值

基本路由传参

传递参数：
方式一：
this.$router.push('/path地址?参数一=参数值1&参数二=参数值2')
方式二：
this.$router.push({path:'',query:{参数一:参数值1,参数二:参数值2}})

接收参数：
this.$route.query.参数名

示例：
在做token失效退出的axios配置中，
axios.interceptor.response.use((res)=>{
return res
},
(error)=>{
if(error.response && error.response.status === 401){ //在服务器响应的错误拦截中，判别服务器返回的响应信息，如果响应信息中存在response这一项，并且其内状态码为401，则表示能确定这是一个token值错误的问题
Store.state.user.token = ''  //清除在仓库中保存的token值
Store.state.user.userInfo = ''  //清除在仓库中保存的用户信息(既然token失效了，需要重新登录，这些登录之后才能拿到的信息理所应当被清空)
Message.error(error.response.data.message) // 导入的ElementUi中的Message,用于提示用户
Router.push('/login?redirect=' + window.location.href.spilte('#')[0])  // 获取到退出前的路由参数，作为参数传递给login页面的地址，当再次登陆后就能回到异常退出前的界面
}
return Promise.reject(error)
})

动态路由匹配
1.和基本路由相比，配置上的区别如下

{
path:'/xxx/:参数名?' // ?此处?表示参数值为可选填，如果不写，则表示参数值为必填项
component:()=>import('')
}

2.传递参数的方式如下

this.$router.push('/xxx/123') // 123为参数

3.接收参数的方式如下

this.$route.params.参数名

name传参
路由配置如下：

{
path: '/',
name:'home'  // 需要配置一个name属性
}

传递参数的方式如下

this.$router.push({name:'路由中配置的name属性值',query:{参数名1:参数值1,参数名2:参数值2}})
或
this.$router.push({name:'路由中配置的name属性值',params:{属性名1:属性值1,属性名2:属性值2}})

二者的区别是
query可携带的参数长度有限，但是刷新后仍会存在
params携带的参数长度没有限制，但是刷新之后会丢失

接收的方式为
this.$route.query.参数名
this.$route.params.参数名