一个VUE的小案例 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/goodslist">商品列表</router-link>
        <router-link to="/newslist">新闻列表</router-link><br/>

        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>
</body>
<script>
    //1.定义好组件
    const newsListComponent = Vue.extend({
        template:'<ul><li>美、英、法联合侵略叙利亚</li><li><router-link to="/newsdetail/10001">乘客用钢笔把飞机逼停了</router-link></li><li><router-link to="/newsdetail/10006">韩国戴眼镜女主播</router-link></li></ul>'
    })

    const goodsListComponent = {
        template:'<ul><li>卫龙辣条</li><li>麻辣小龙虾</li><li>长沙臭豆腐</li></ul>'
    }

    //新闻详情组件
    //拿到路径中的参数，可以参考https://router.vuejs.org/zh-cn/essentials/dynamic-matching.html
    const newsDetailComponent = {
        template:'<div>我是新闻详情 传递过来的id是 {{$route.params.newsId}}</div>'
    }

    //2.创建路由对象，设置路由规则
    const router = new VueRouter({
        routes:[//其中routes很容易写错，建议拷贝
            { path: '/', redirect: '/goodslist' },
            {path:'/goodslist',component:goodsListComponent},
            {path:'/newslist',component:newsListComponent},
            {path:'/newsdetail/:newsId',component:newsDetailComponent}
        ]
    })

    //3. 注入到根实例,从而让整个应用都有路由功能
    const vm = new Vue({
        router
    }).$mount('#app')
</script>
</html>

很好理解吧

posted @ 2017-04-26 12:21  Fanyee  阅读(533)  评论(0)  编辑  收藏  举报