Vue-跳转路由

跳转路由

方式一：path路径跳转。

　　传值可以使用params 传值和query传值
　　(缺点:不能传引用数据类型-数组，对象等)

　　方法一：

<router-link to="/path">小说列表</router-link> 

　　方法二：

<router-link :to="path1">Box1</router-link> 

...

data() {
	return{
		path1:'/Box1'
	}
}

　　方法三：

<router-link :to="'/Box1'">Box1</router-link> 

...

data() {
	return{
		path1:'/Box1'
	}
}

方式二：命名式路由跳转（name）。
　　传值可以使用params和query传值
　　(优点:可以传基本数据类型和数组，对象)

<router-link :to="{name:'Box1',query:{id:123456}}">板块一</router-link> 

...

//路由配置
{
	path:'/Box1',
	//该path路径不能少。因为命名式路由跳转是通过name找到该path
	name:'Box1',
	component:Box1
}

方式三：编程式路由跳转(最常用的，不受时机、条件的限制)。
　　传值可以用params 传值和query传值
　　(优点:可以传基本数据类型和数组，对象)

Jump() {
        this.$router.push({
            path:"/Box1"，
            query:{
            	id:this.id
            }
        })
      }
 ...
 
 //接收值如果进入另一个页面，一般在created中接收
 this.$route.query.id
 
 //路由配置
 { path: "/Box1", component: ()=>import("../Box1") }