vue——路由

路由

后端路由:监听不同的URI(地址),做不同的请求处理

前端路由:是专门为SPA(单页应用程序)服务,也是监听不同的地址,做页面的切换

基本使用步骤

1. 创建路由对象并配置路由规则
// 1.1 创建组件模板对象
var login = {
    template:'<div>登录</div>'
}
var register = {
    template:'<div>注册</div>'
}
// 1.2 创建路由对象并配置路由规则
var router1 = new VueRouter({
    // routes用来存放路由规则,每个路由规则都是一个对象
    routes:[
        // path: 页面#后面的地址
        // component 需要显示的组件对象
        {path:'/',redirect:'/login'},
        {path:'/login',component:login},
        {path:'/register',component:register}
    ]
})

// 1.3 将创建处理的路由对象和Vue进行绑定
new Vue({
    el:'#app',
    // 将vuerouter对象注册到Vue内部,以保证在托管区域中可以使用VueRouter内部提供的组件以及其他属性和方法
    router:router1
})

2. 使用<router-view>进行占位
<div id='app'>  
    <router-view></router-view>
<div>

3. 使用<router-link>设置跳转路径
<router-link to='/login'>登录</router-link>

路由传参

query传参

// 1. 在跳转路径后面使用查询字符串拼接参数
<router-link to = '/login?name=zs$age=18'>登录</router-link>

// 2. 在路由对应的组件内部使用`this.$route.query`获取参数
this.$route.query.name // zs
this.$route.query.id // 18

params传参

// 1. 更改路由规则用于匹配参数
new VueRouter({
    routes:[
        // :id用于匹配/login/13后面的参数13
        {path:'/login/:id',component:login}
    ]
})
// 2. 在跳转路径后面使用/拼接参数
<router-link to = '/login/13'>登录</router-link>

// 3. 在路由对应组件内部使用`this.$route.params`获取参数
var login = {
    template:'<div>登录组件{{this.$route.params.id}}</div>',
    created(){
        console.log(this.$route.params.id) // 获取到的就是13
    }
}

嵌套路由

// 1. 在父路由内部使用children属性配置子路由规则,子路由规则对象中的path属性不要 '/' 
// 2. 在父路由规则对应的组件模板中添加router-view用于显示子路由规则对应的组件
// 3. 在<router-link>中设置跳转路径(将父路由和子路由的path拼接)