# 1、 vue-router的基本使用 # 2.1基本使用步骤 ~~~ 1.引入相关的库文件 2.添公路由链接 3.添加路由填充位 4.定义路由组件 5.配置路由规则并创建路由实例 6.把路由挂载到Vue根实例中 ~~~ ## 1.引入相关的库文件 vue-router 下载：[https://unpkg.com/vue-router/dist/vue-router.js](https://unpkg.com/vue-router/dist/vue-router.js) ~~~ // 按循序引入 <!-- 导入vue 文件，为全局window 对象挂载Vue 构造函数. > <script src=". /lib/vue_ 2.5.22.js"></script> <!--导入vue-router文件，为全局window 对象挂载VueRouter 构造函数-- > <script src=". /lib/vue-router_ 3.0.2.js"></ script> ~~~ ## 2.添加路由链接 ~~~ <!-- router-link 是vue中提供的标签，默认会被渲染为a标签--> <!-- to属性默认会被渲染为href属性-- > <!-- to属性的值默认会被渲染为#开头的hash地址--> <router-link to="/user">User</router-link> <router-link to="/ regi ster ">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} ] }) ~~~ ## 6.把路由挂载到Vue根实例中 ~~~ newVue({ el: ' #app'， //为了能够让路由规则生效，必须把路由对象挂载到vue 实例对象上 router }) ; ~~~ 代码分析 ~~~ 2.1基本使用步骤 1.引入相关的库文件 引入vue.js和vue-router_v3.5.1.js <script type="text/javascript" src="vue.js"></script> <script type="text/javascript" src="vue-router_v3.5.1.js"></script> 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．配置路由规则并创建路由实例 const router = new VueRouter({ //routes 是路由规则数组 //每个路由规则都是一个配置对象，其中至少包含path 和component两个属性: //path表示当前路由规则匹配的hash地址 //component表示当前路由规则对应要展示的组件 routes: [{ path: '/user', component: User }, { path: '/register', component: Register }] }) 6.把路由挂载到Vue根实例中 const vm = new Vue({ el: '#app', data: {}, //挂载路由实例对象 //router: router router }) ~~~