Vue路由传值

一、路由传值：

1、通过路由的路径带参数（url中显示参数），同时配置路由的时候也要带上参数，获取参数使用this.$route.params.id，直接拿路由里面的参数。

toRouter（）{
    var id = 1;
    var type = 2;
    this.$router.push({
        //path:"/路径名/"+ 参数1 + "/" + 参数2,
        path:"/content/"+ id +"/"+ type
    });
}

router.js需配置

{
    path:"index/:id",
    name:"index",
    component: Index
}
 
//传多个参数
{
    path:"index/:id1/:id2",
    name:"index",
    component: Index
}
 
//相同路由有参数和无参数(需把有参数的放在无参数的前面)
{
    path:"index/:id",
    name:"index",
    component: Index
},
{
    path:"index",
    name:"index",
    component: Index
}
 

2、不用在router.js路由页配置参数来接收（url中不显示参数，刷新页面会丢失传递过来的参数），而是通过name或者path去跳转（name和path写法一样，区分name和path）

//通过name跳转
toRouter(){
    this.$router.push({
        name:"content",
        params:{
            content:this.content,//指定值或者获取的值
            page:"1", //其他需要传递的参数
        }
    })
}
 
//通过path跳转
toRouter(){
    this.$router.push({
        path:"/content",
        params:{
            content:this.content,//指定值或者获取的值
            page:"1", //其他需要传递的参数
        }
    })
}

目标接收组件，例如：content.vue

created(){
    this.getRouter();
}
methods:{
    getRouter(){
        this.content = this.$route.params.content;
        this.page = this.$route.params.page;
    }
}

二、路由扩展：

1、$router和$route的区别

$router是router构造方法全局路由的实例。当导航到不同url，可以使用this.$router.push方法，这个方法则会向history里面添加一条记录，当点击浏览器回退按钮或者this.$router.back()就会回退之前的url。

$route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。如path，name等。

2、路由跳转分为编程式和声明式

声明式：

//路由入口
<router-link :to="路由地址">
//视图出口 在一个页面嵌套子路由，并且不跳转页面，子页面就会渲染在router-view的地方
<router-view></router-view>
 
<router-link to="/index">首页</router-link>
 
// 字符串
<router-link to="millia"> to millia</router-link>
// 对象
<router-link :to="{path:'millia'}"> to millia</router-link>
// 命名路由
<router-link :to="{name: 'milliaPath'}"> to millia</router-link>
 
//直接路由带查询参数query，地址栏变成 /milliaPath?color=red
<router-link :to="{path: 'milliaPath', query: {color: 'red' }}"> to millia</router-link>
 
// 命名路由带查询参数query，地址栏变成/milliaName?color=red
<router-link :to="{name: 'milliaName', query: {color: 'red' }}"> to millia</router-link>
 
//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略
<router-link :to="{path: 'milliaPath', params: { color: 'red' }}"> to millia</router-link>
 
// 命名路由带路由参数params，地址栏是/milliaName/red
<router-link :to="{name: 'milliaName', params: { color: 'red' }}"> to millia</router-link>

编程式：（如提供了path，那么params和query的配置就会被忽略）

// 字符串
router.push('millia')
// 对象
router.push({ path: 'millia' })
// 命名的路由
router.push({ name: 'user', params: { userId: 'millia' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

path:'name'和path:'/name'的区别

//比如当前路径是home
this.$router.push({path:'name'})//==>path为/home/name
this.$router.push({path:'/name'})//==>path为/name