一个VUE的小案例

最新推荐文章于 2024-04-10 13:23:20 发布

weixin_30432007

最新推荐文章于 2024-04-10 13:23:20 发布

阅读量74

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/DZzzz/p/8951425.html

版权

<!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>

很好理解吧

转载于:https://www.cnblogs.com/DZzzz/p/8951425.html

weixin_30432007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个VUE的小案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
复制链接

扫一扫