Vue-Router学习笔记

基本使用步骤

引入相关的库文件

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

一定要按照次序，先引入vue再引入router

添加路由链接

在页面上添加

<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>

router-link标签会被渲染成为a标签

to属性默认会被渲染成为href属性

to属性的值默认会被渲染为 # 开头的hash地址

添加路由填充位

将来通过路由规则匹配到的组件，将会被渲染到router-view所在位置

//路由占位符
<router-view></router-view>

定义路由组件

var/const User = {
template:'<div>
    User
</div>'
}
var/const Register = {
template:'<div>
    Register
</div>'
}

配置路由规则并创建路由实例

var router = new VueRouter({
//routes 是路由规则数组
routes:[
//每个路由规则都是一个配置对象，其中至少包含path和component两个属性
//path标识当前路由规则匹配的hash地址
//component表示当前路由规则对应要展示的组件
{path:'/user',component:User},
{path:'/register',component:Register}
]
})

把路由挂载到Vue根实例中

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

路由重定向

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

var router = new VueRouter({
routes:[
//其中，path表示需要被重定向的原地址，redirect表示将要被重定向到的新地址
{path:'/',redirect:'/user'},
{path:'/user',component:User},
{path:'/register',component:Register}
]
})

嵌套路由

嵌套路由功能分析

1. 点级父级路由链接显示模板内容
2. 模板内容中又有子级路由链接
3. 点击子级路由链接显示子级模板内容

用法

父级路由组件模板

<p>
    <router-link to='/user'>User</router-link>
    <router-link to='/register'>Register</router-link>
</p>
<div>
    //控制组件的显示位置,占位符
    <router-view></router-view>
</div>

子级路由模板

const Register = {
template:'<div>
    <h1>
        Register 组件
    </h1>
    <router-link to="/register/tab1">Tab1</router-link>
    <router-link to="/register/tab2">Tab2</router-link>
<router-view></router-view>
    </div>
'

}

子路由组件

const Tab1 = {
template:'<h3>
    tab1子组件
</h3>'
}
const Tab2 = {
template:'<h3>
    tab2子组件
</h3>'
}

嵌套路由配置

父级路由通过children属性配置子级路由

const router = new VueRouter({
routes:[
{path:'/user',component:User},
{path:'register',component:Register,
//通过children属性，为/register添加子路由规则
children:[
{path:'/register/tab1',component:Tab1},
{path:'/register/tab2',component:Tab2}
]
}
]
})

动态匹配路由

路由规则一部分完全一样，一部分动态的

动态路径参数 以冒号开头

var router = new VueRouter({
routes:[
//动态路由 参数冒号开头
{path:'/user/:id',componet:User}
]
})

const User = {
//路由组件中通过$route.params获取路由参数
template:'<div>
    User {{$route.params.id}}
</div>'
}

props传递参数

设置props为布尔值，true

var router = new VueRouter({
routes:[
//如果props设置为true，route.params将被设为组件属性
{path:'/user/:id',componet:User,props:true}
]
})

const User = {
props:['id'],//使用props接收路由参数
template:'<div>
    用户ID:{{id}}
</div>'
}

props设置为对象类型

var router = new VueRouter({
routes:[
//props设置为对象属性，它会被按照原样设置为组件属性
{path:'/user/:id',componet:User,props:{
uname:'lisi',
age:'18'
}}
]
})
const User = {
props:['uname','age'],
template:'<div>
    用户信息{{uname + '---' + age}}
</div>'
}

props值为函数

如果props是一个函数，则这个函数接收route对象为自己的形参

var router = new VueRouter({
routes:[
//动态路由 参数冒号开头
{path:'/user/:id',componet:User,
props:route=>({
uname:'zs',age:'20',id:'route.params.id'
})
}
]
})
const User = {
props:['uname','age','id'],
template:'<div>
    用户信息:{{uname} {{age}}  {{id}}
</div>'
}

命名路由

为了方便的表示路由路径，给路由规则起一个别名

const router = new VueRouter({
routes:[
{path:'/user/:id',name:'user',component:User}
]
})
<router-link :to="{name:'user',params:{id:123}}">User</router-link>
router.push({name:'user',params:{id:123}})

编程式导航

1. 声明式导航

通过点击链接实现导航的方式，叫做声明式导航

普通网页中链接或者Vue中的

2. 编程式导航

通过调用JavaScript形式的API实现导航的方式，叫做编程式导航

例如：普通网页中的location.href

基本方法

常见编程式导航API如下

1. this.$router.push('hash地址')
2. this.$router.go(-1)//前进一步

const User = {
template:'<div>
    <button @click="goRegister">
        跳转到注册页面
    </button>
</div>'
methods:{
goRegister:function(){
//通过编程的方式控制路由跳转
this.$router.push('/register');
}
}
}

this.$router.push()其他用法

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