Vue中的路由传参

1.通过query获取参数

1. 创建路由对象，将路由对象注册到Vue实例中去

var 页面模板对象={template:'<p>第一个</p>'}
var router=new VueRouter({
    routes:[
        {path:'/监听的路由链接地址',component:页面模板对象}
    ]
})
var vm=new Vue({
    el:'#app',
    data:{},
    methods:{},
    router:router
})

2. 在页面上添加router-view和router-link标签，并传参

<div id="app">
        <router-link to="/监听的路由链接地址?id=1">aaa</router-link>
        //可以用&连接多个参数
        <router-view></router-view>
    </div>

3. 获取传递过来的参数
   vue-router会将传递过来的参数放入一个route对象中，这种自带的对象可以通$route进行访问，而传参会被存储在$route下的query对象中，作为query对象的属性存放
   这个传递过来的参数，只有接收的组件下的router才有

var 页面模板对象={
	//可以直接将参数写入标签中，利用插值表达式
	template:'<p>第一个---{{$route.query.id}}</p>',
	//也可以在方法中调用
	created(){
		console.log(this.$route.query.id)
	}
}

2.通过params获取参数

1. 创建路由对象，将路由对象注册到Vue实例中去

var 页面模板对象={template:'<p>第一个</p>'}
var router=new VueRouter({
    routes:[
    	//！！！！注意这里有所不同
    	//需要多少个参数，都要提前设置一个占位符
    	//vue-router会自动将地址后面的数据解析成一个参数
        {path:'/监听的路由链接地址/:id',component:页面模板对象}
    ]
})
var vm=new Vue({
    el:'#app',
    data:{},
    methods:{},
    router:router
})

2. 在页面上添加router-view和router-link标签，并传参

<div id="app">
		<!--直接写数字或字符串即可-->
        <router-link to="/监听的路由链接地址/10">aaa</router-link>
        //可以用/连接多个参数
        <router-view></router-view>
    </div>

3. 获取传递过来的参数

var 页面模板对象={
	//可以直接将参数写入标签中，利用插值表达式
	template:'<p>第一个---{{$route.params.id}}</p>',
	//也可以在方法中调用
	created(){
		console.log(this.$route.params.id)
	}
}

总结：
第一种方式不需要提前定义占位符，可以直接使用，比较方便，而且就算没有传参，也可以使用路由
第二种方式需要提前定义占位符，不能直接使用，传递参数时比较方便，路径中的参数也不容易暴露信息