一个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>

很好理解吧

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值