Vue之路由01（数据传递、基本案例）

什么是路由？

• 请求分发组件
• 编程请求定向
• 请求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>`}