vue路由

vue-router

基本使用
1.定义组件

var student={
            template:``
        }

2.定义路由

var router=new VueRouter({
            routes:[{
                path:"/student",
                component:student
            },{}] //可以放多个路由对象
        })

3.挂载到vue实例

new Vue({
            el:"#app",
            router:router
        })

router-link标签
作用: 加载页面组件
1.基本用法

    <router-link to="/student"></router-link>

2. :to=对象

    <router-link :to="{path:"/student"}"></router-link>  //对象类型

3.通过query传递参数

    <router-link :to="{path:"/student",query:{id:1}}"></router-link>
//通过query传递参数，参数会拼接到地址栏
//获取当前参数，在当前组件中使用$route.query

4.通过params传递参数

    <router-link :to="{name:'user-a',params:{id:10}}">跳转到user页面</router-link>
//如果使用params发送参数，需要使用路由名称进行跳转
//获取参数，在组件中使用$route.params

router-view标签：显示路由
命名路由+重定向+别名

var router=new VueRouter({
                routes:[{
                    path:"/student",
                    name:"student-a",  //给路由命名，方便跳转
                    component:student,
            		redirect:"/teacher"  //重定向
                },{
                    path:"/teacher",
                    name:"teacher-a",
                    component:teacher
                },{
                    path:"/user",
                    name:"user-a",
                    alias:"a", //别名
                    component:user
                }]
            });