zoukankan      html  css  js  c++  java
  • vue插件之vue-router路由基本使用

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!-- <script src="https://unpkg.com/vue-router@3.1.6/dist/vue-router.js"></script> -->
        <!-- 1.引入vue-router -->
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    </head>
    <body>
        <div id="app"></div>
        <script>
            // 2.Vue.use(VueRouter);可省略
            Vue.use(VueRouter);
            var First = {
                template : `
                    <div>
                        <h3>this is first view</h3>
                    </div>
                `,
            }
            var Second = {
                template : `
                    <div>
                        <h3>this is second view</h3>
                    </div>
                `,
            }
            // 3.创建并配置路由对象
            var router = new VueRouter({
                // 注意这里是routes
                routes:[
                    {
                        path:'/first_view',
                        // 可以通过name属性为路由取名,在router-link中绑定to属性,来实现动态路由
                        name:'first',
                        component:First
                    },
                    {
                        path:'/second_view',
                        name:'second',
                        component:Second
                    }
                ]
            })
            var Vapp = {
                // 5.在页面中应用
                template : `
                    <div>
                        <router-link to="/first_view">第一个页面</router-link>
                        <router-link :to="{name:'second'}">第一个页面</router-link>
                        <router-view></router-view>
                    </div>
                `,
            }
            new Vue({
                el:"#app",
                template : `
                    <Vapp/>
                `,
                components:{
                    Vapp,
                },
                // 4.将路由对象挂载到Vue实例化对象中
                router,
            })
        </script>
    </body>
    </html>
    

      

  • 相关阅读:
    diffstat命令
    v-if与v-show的区别
    常数时间插入、删除和获取随机元素
    diff命令
    C++ bitset的简单使用
    树的直径 | 简答的两道模板题
    Codeforces Round #544 (Div. 3)简单题解
    VIM 入门手册, (VS Code)
    PTA 天梯赛 L3-003 社交集群(并查集)
    L3-002 特殊堆栈 (双数组模拟栈)
  • 原文地址:https://www.cnblogs.com/shannen/p/12494473.html
Copyright © 2011-2022 走看看