Vue之路由详解

1、路由传参
参数可以分为；查询参数和路径参数

<router-link to="/user?username=XXX&pass=123">Go to user</router-link>
//使用$route.query来获取
<router-link to="/user/123">Go to user</router-link>
//需要先在路由定义中定义
<script>
	var routers = [
		{
	        path: '/user/:userId',				//:参数名，没加?表示必须要填写的参数
	         component: user,
	         name:'user',
	         alias: '/b'      //起别名
	     }
	]

</script>

2、路由重定向
例如：当用户未登录时，想直接访问详情页面时，直接重定向到登录页面，当访问不存在的页面时，直接重定向到主页

利用*来匹配所有不在路由设置里面的路径，对这些不存在的路径可以写一个404的组件也可直接重定向到主页

{
    path: '*',
    component: notFound,
    redirect:'/home'
}

3、子路由定义（多少层子组件，多少个router-view）

//定义组件模板
<template id="list">
    <div>
        <button @click="change">点击一下</button>
        <router-link to="/list/profile">Go to list1</router-link>
        <router-link to="/list/profiles">Go to list2</router-link>
        <router-view></router-view>
        <h2>list------list------list</h2>
        <h3>path-------{{$route.path}}</h3>
        <h3>query-------{{$route.query}}</h3>
        <h3>params-------{{$route.params}}</h3>
        <h3>name-------{{$route.name}}</h3>
    </div>
</template>

//路由定义
<script>
	var routes = [
		{
           path: '/list',
           component: list,
           alias: '/liebiao',
           children: [					//子路由需要写在children里面，以数组形式填写
           {
               path: 'profile',
               component: childrenone
           },{
               path: 'profiles',
               component: childrentwo
           }]
       },
	]
</script>

4、路由跳转的方式

1. 声明式 html跳转 router-link to
2. 编程式 javascript 跳转 函数代码跳转 this.$router router

<router-link to="/">Go to local</router-link>				//类似于a链接跳转
this.$router.push('/user-admin')							//js方法实现路由跳转