Vue Router

Vue Router 包含的功能有：

• 支持HTML5历史模式或hash模式
• 支持嵌套路由
• 支持路由参数
• 支持编程式路由
• 支持明明命名路由

基本使用步骤

1. 引入相关的库文件

<script src="./vue.js" type="text/javascript"></script>
<script src="./vue-router_3.0.2.js"></script>

2. 添加路由链接

<router-link to='/user'>user</router-link>
<router-link to='/register'>register</router-link>

3.添加路由填充位

//路由占位符，路由规则匹配到的组件将会被渲染到router-view所在的位置
<router-view></router-view>

4.定义路由组件

 const user = {
        template: '<div>User</div>'
    }
const register = {
            template: '<div>register</div>'
}

5.创建路由实例对象

const router = new VueRouter({
    routers:[
        {path:'/user',component: user},
        {path:'/register',component: register},
    ]
})

6. 挂载路由实例对象

const vm = new Vue({
            // 指定控制的区域
            el: '#test',
            data: {},
            // 挂载路由实例对象
            // router: router
            router
})

路由重定向

通过路由规则的redirect属性，指定一个新的路由地址，可以很方便的设置路由的重定向

const router = new VueRouter({
    routers:[
        {path: '/', redirect: '/user'},
        {path: '/user',component: user},
        {path: '/register',component: register},
    ]
})

嵌套路由用法

1. 嵌套路由功能分析

• 点击父级路由链接显示模板内容
• 模板内容中又有子级路由链接
• 点击子级路由链接显示子级模板内容

const router = new VueRouter({
    routers:[
        {path: '/', redirect: '/user'},
        {path: '/user',component: user},
        {path: '/register',component: register, children: [
        {path: '/register/tab1',component: tab1},
        {path: '/register/tab1',component: tab1}
        ],
    ]
})

动态路由匹配

 const user = {
        template: '<div>User{{$route.params.id}}</div>'
    }

const router = new VueRouter({
    routers:[
        {path: '/', redirect: '/user'},
        {path: '/user/:id',component: user},
    ]
})

路由组件传递参数

$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦

1. props的值为布尔类型

 const user = {
        props: ['id'],
        template: '<div>User{{id}}</div>'
    }

const router = new VueRouter({
    routers:[
        {path: '/', redirect: '/user'},
        {path: '/user/:id',component: user, props: true},
    ]
})

2. props的值为对象类型

//<router-link to='/user/1'>user</router-link>

 const user = {
        props: ['id', 'uname'],
        template: '<div>User{{id}}{{uname}}</div>'
    }

const router = new VueRouter({
    routers:[
        {path: '/', redirect: '/user'},
        {path: '/user/:id',component: user, props: {uname:'lisi'}
        },
    ]
})

3. props的值为函数类型

//<router-link to='/user/1'>user</router-link>
 const user = {
        props: ['id', 'uname', 'age'],
        template: '<div>User{{id}}{{uname}}{{age}}</div>'
    }

const router = new VueRouter({
    routers:[
        {path: '/', redirect: '/user'},
        {path: '/user/:id',component: user, props: route => (uname:'zhangsan', age: 14, id: route.params.id)
        },
    ]
})

命名路由的配置规则

//<router-link :to='{name:'user', params:{id:123}}'>user</router-link>
 const user = {
        props: ['id', 'uname', 'age'],
        template: '<div>User{{id}}{{uname}}{{age}}</div>'
    }

const router = new VueRouter({
    routers:[
        {path: '/', redirect: '/user'},
        {path: '/user/:id', name: 'user', component: user, props: route => (uname:'zhangsan', age: 14, id: route.params.id)
        },
    ]
})

编程式导航

• this.$router.push('hash地址')

//字符串（路径名称）
router.push('/home')
//对象
router.push({path: '/home'})
//命名的路由（传递参数）
router.push({name:'user', params:{id:123}})
//带查询参数，变成 /register?uname=lisi
router.push({path: '/register', query: {uname: 'lisi'}})

• this.$router.go(n)