vue的核心组件之路由的使用步骤

最新推荐文章于 2022-04-14 17:26:22 发布

周传伦

最新推荐文章于 2022-04-14 17:26:22 发布

阅读量143

点赞数

分类专栏： vue html 文章标签： vue html html5 vue.js

本文链接：https://blog.csdn.net/zhouchuanlun/article/details/107793168

版权

vue 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

vue的核心组件之路由的使用步骤如下：
1.安装路由插件；
2.创建路由对象；
3.配置路由；
示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='app'></div>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
    <script>
        var Login={
            template:`
              我是登录页面
            `,

        }
        // #安装路由插件；
        Vue.use(VueRouter)
        //创建路由对象；
        var router=new VueRouter({
            //    配置路由对象
            routes:[
                {path:'/login',name:'login',component:Login}
            ]
        })
        new Vue({
           el:"#app",
           router,
           template:`
                <div>
                <p>请在链接上加上login测试路由功能</p>
                <router-view></router-view>
                </div>
                  `,
           data(){
               return{}
           }

        })
    </script>
    
</body>
</html>