• vue-router的创建(1)


    vue-router的创建

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="js/vue.js"></script>
        <!-- 1-导入包 -->
        <script src="js/vue-router.js"></script>
    </head>
    <body>
    <div id="app">
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
        <!-- 容器 -->
    <router-view></router-view>
    
    </div>
    
    
    </body>
    </html>
    <script>
    
    
    // 2-创建子组件
    var login={
        template:'<h3>这个是登录子组件,是A开发而</h3>'
    }
    var register={
        template:'<h3>这个是注册子组件,是B开发而</h3>'
    }
    
    
    
    // 3-创建路由对象
    var router = new VueRouter({
        routes:[//路由规则
        {path:'/', redirect:'/login'},//重定向 启动就显示出来
    {path:'/login',component:login},
    {path:'/register',component:register}
        ],
        linkActiveClass:'myactive' //激活相关的类
    })
    
    // 创建一个 vue实例,得到viewModel
    var vm = new Vue({
        el:"#app",
        data:{},
        methods:{},
        // router:router = 可以写成 router
        router
    
    })
    </script>

    -------------------------------------------

    个性签名:独学而无友,则孤陋而寡闻。做一个灵魂有趣的人!

    如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,博主在此感谢!

    万水千山总是情,打赏一分行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主,哈哈哈(っ•̀ω•́)っ✎⁾⁾!

  • 相关阅读:
    Java基本语法(一)
    JAVA菜鸟入门HelloWorld
    python 练习题-质数
    python 字符串转运算符
    python 提取不重复的整数
    python 句子逆序
    python 数字颠倒
    python 字符个数统计
    python 练习题-计算字符个数
    python int型正整数在内存中存储为1的个数
  • 原文地址:https://www.cnblogs.com/mahmud/p/10265279.html
Copyright © 2020-2023  润新知