什么是路由?
- 请求分发组件
- 编程请求定向
- 请求URL资源Resource映射
先通过一个小案例看看路由到底有什么用?
通过上面可以看到路由就像是一个<a>标签链接一样
代码
<div id="app">
<!-- 使用 router-link 组件来导航. -->
<!-- router-link 组件是vue的内置组件,使用前需保证导入了vue-router.js包. -->
<!-- <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签,点击后将跳转到指定链接 -->
<router-link to="/home">主页</router-link>
<router-link to="/game">游戏</router-link>
<!-- 路由出口 -->
<!-- 路由匹配到的组件(也就是跳转的链接)将渲染在这里 -->
<router-view></router-view>
</div>
<script>
//第一步:定义路由组件
const home = {template : `<div><h2>这是主页</h2></div>`}
const game= {template : `<div><h2>游戏页面</h2></div>`}
//第二步:创建router实例
const routers = new VueRouter({
//路由配置,使用routes属性
//每个路由映射一个组件
routes : [
//path:自命名一个路径 component: 绑定对应的组件
{path : '/home', component: home},
{path : '/game', component: game}
]
})
//第三步:注册vue实例
new Vue({
//调用router属性,路由实例传入
router:routers
}).$mount('#app')
</script>
传递数据
第一种方式:
第一步: 参数的传递
<!-- 第一种:传递固定参数,直接在链接路径后面加上参数 -->
<router-link to="/game/王者荣耀/英雄联盟">游戏</router-link>
第二步:路由实例的配置
/* 用" /: "加上接收参数的形参名 */
{path : '/game/:name/:name2', component: game}
第三步:调用接收到的数据
/* 使用$route.params.形参名 */
const game= {template : `<div><h2>游戏页面{{$route.params.name+$route.params.name2}}</h2></div>`}
最终结果:
第二种方式:
第一步: 参数的传递
<!-- 第二种:传递可变参数 -->
<!-- to前面加上' : ' -->
<!-- 链接路径变成name的值 -->
<!-- params:{ 传递的参数 } -->
<router-link :to="{name:'home',params : {name:userName,Id:id}}">主页</router-link>
第二步:路由实例的配置
/* 加上name属性 */
/* path:中可加可不加占位形参(/:name/:Id) */
/* 加了的话,在浏览器地址栏会显示传递的数据,否则不会显示 */
{path : '/:name/:Id',name :"home", component: home}
第三步:调用接收到的数据
/* 没有变化 */
const home = {template : `<div><h2>这是主页{{$route.params.name+$route.params.Id}}</h2></div>`}