04 Vue Router路由管理器

Posted 2021-03-21 songsongblue

路由的基本概念与原理

Vue Router

Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器。
它和vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发。
Vue Router包含的功能有:

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

vue-router的基本使用

基本使用步骤

1.引入相关的库文件

• 导入vue文件为全局window对象挂载Vue构造函数
• 导入vue-router文件，为全局window对象挂载VueRouter构造函数
  注意：vue文件一定要在vue-router文件之前导入
  2.添加路由链接
• router-link 是vue中提供的标签，默认会被渲染为a标签
• to属性默认会被渲染为href 属性
• to属性的值默认会被渲染为#开头的hash地址

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

3.添加路由填充位

• 路由填充位(也叫做路由占位符)
• 将来通过路由规则匹配到的组件，将会被渲染到router-view 所在的位置

<router-view></ router-view>

4.定义路由组件

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

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

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

注意：component只接收路由对象，不接受字符串
6.把路由挂载到Vue根实例中

new Vue({
el:'#app',
//为了能够让路由规则生效，必须把路由对象挂载到vue实例对象上
//router:router,在ES6中，如果属性名和属性值的名字是也一致的，可以简写
router
});