vue-router的使用

最新推荐文章于 2024-07-09 21:18:14 发布

大厂梦

最新推荐文章于 2024-07-09 21:18:14 发布

阅读量166

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_35006507/article/details/123412709

版权

vue 的特性是一个html页面完成一个应用

那么我们如何通过一个html来完成一个应用呢？

前面我们学习了vue的组件，今天我们利用组件模板化，和vue-router路由来实现一个小小的案例

<body>
    <!-- vue 的特性是只能一个html.,然后根据路由来区分模板处理 -->
    <div id="app">
        <!-- <a href="#">首页</a>
        <a href="#">商品</a>
        <div>Hello,vue-router学习</div>
        <ul>
            <li>1.小米11</li>
            <li>2.小米12</li>
        </ul> -->
        <!-- 专门用于跳转的，可代替a标签的跳转 -->
        <router-link to="/index">首页</router-link>
        <router-link to="/product">商品</router-link>
        <!-- 作用于将模板放入并渲染 -->
        <router-view></router-view>
    </div>

    
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<!-- 要根据不同的url ，连接到不同的页面  需要使用模板来实现，将模板绑定对应的路由地址 -->
<script>
    // 创建vue组件模板
    let index = Vue.component("index",{
        template:`<div>Hello,vue-router学习</div>`
    })

    let product =  Vue.component("product", {
        template:`<ul>
            <li>1.小米11</li>
            <li>2.小米12</li>
        </ul>`
    })
    // 使用路由来管理模板  将url 跟模板进行绑定
     const router = new VueRouter({
         routes: [
             //path 路由地址   component： vue模板地址
             {path:"/index",component:index},
             {path:"/product",component:product}
             
         ]

    })

    new Vue({
        el:"#app",
        //路由最终是要交给vue管理的  也可直接写成 router  ES6 名称相同 不用写:router
        router:router
    })

</script>
</html>