vue-router传递参数《案例》

vue-router 路由基本使用

• 参考： https://router.vuejs.org/zh-cn/essentials/getting-started.html
• 用 Vue.js + vue-router 创建单页应用，使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。下面是个基本例子：

HTML

<div id="app">
    <!-- 使用 router-link组件来导航 -->
    <!-- 通过传入 to 属性指定链接, <router-link>会默认渲染成一个 标签  -->
    <router-link to="/goodList">商品列表</router-link>
    <router-link to="/newsList">新闻早知道</router-link>
    <br>
    <!-- 路由出口, 组件将渲染在这里 -->
    <router-view></router-view>
</div>


<!-- 使用 模板 定义商品列表 -->
<template id="goodList">
    <ul>
        <li>
            <router-link to="/goodDetail/0001">苹果</router-link>
        </li>
        <li>
            <router-link to="/goodDetail/0002">草莓</router-link>
        </li>
        <li>香蕉</li>
    </ul>
</template>

引入文件

  <script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>

JavaScript

<script>
    // 定义商品列表 和 新闻列表 组件
    const goodListComponent = {
        template: '#goodList'
    }

    const newListComponent = Vue.extend ({
        template: '<ul><li>美院开考学生跪拜</li><li>中国最好大学排名</li><li>90后春节被掏空</li></ul>'
    })

    // 商品详情组件
    const goodDetialComponent = {
	    // 通过 {{ $route.params.xxx }} 获取传递过来的参数
        template: '<div>啦啦啦, 我是商品详情... {{$route.params.goodId}} </div>'
    }

    // 创建路由对象, 设置路由规则
    const router = new VueRouter({
        routes: [
            // 设置路由规则, 会自动帮我们注册组件
            // 路由重定向
            {path: '/', redirect: '/goodList'},
            {path: '/goodList', component: goodListComponent},
            {path: '/newsList', component: newListComponent},
            // goodId 是一个路由参数, 触发时候, 传递 0001,0002
            {path: '/goodDetail/:goodId', component: goodDetialComponent}
        ]
    })

    // 实现 Vue组件
    const vm = new Vue({
        // el: '#app',
        router
    }).$mount('#app') //挂载

</script>