Vue Router

Vue Router(官网 https://router.vuejs.org/zh/)是 Vue.js 官方的路由管理器。

Vue Router包含的功能有：

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

基本使用：

　　 1.引入相关的库文件。        ***如果脚本实现方式似乎是基于 Vue 2.x 的语法，就引入Vue.js 2.x和Vue Router 3.x

　　　　　　　　　　　　　　 ***如果脚本实现方式似乎是基于 Vue 3.x 的语法，就引入Vue.js 3.x和Vue Router 4.x

　　 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>'

　　　　　　}　

　　　　　　const Register={

　　　　　　　　template:'<h1>Register</h1>'

　　　　　　}

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

　　　　　　//创建路由实例对象

　　　　　　const  router2 = new VueRouter{

　　　　　　　　//router  是路由规则数组

　　　　　　　　routes:[

　　　　　　　　　　//每个路由规则都是一个匹配对象，其中至少包含 path 和 component 两个属性；

　　　　　　　　　　//path 表示当前路由规则对应要展示的 hash 地址

　　　　　　　　　　//component 表示当前路由规则则对应要展示的组件

　　　　　　　　　　{path:'/user',component:User},

　　　　　　　　　　{path:'/register',component:Register}

　　　　　　　　]

　　　　　　}

　　 6.把路由挂载到Vue根实例中

　　　　　　new Vue({

　　　　　　　　el:"#app",

　　　　　　　　router : router2               //为了能够让路由规则生效，必须把路由对象挂载到 vue 实例对象上 new出来的 router 上　

　　　　　　})