Vue学习笔记十二：安装和使用路由

最新推荐文章于 2024-11-02 08:58:20 发布

INAGIML

最新推荐文章于 2024-11-02 08:58:20 发布

阅读量113

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_45283247/article/details/104738613

版权

Vue学习笔记十二：安装和使用路由

Vue版本：2.5.21
Vue-router版本：3.1.6

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>安装和使用路由</title>
</head>

<body>
    <!-- 
         安装和使用路由
           路由是以插件的形式引入我们的vue项目中来的
            *vue-router是vue的核心插件

              1.下载vue-router插件 cnpm i vue-router -S

              2.安装插件Vue.use(VueRouter);

              3.创建路由对象var router = new VueRouter();

              4.配置路由规则 router.addRoutes([路由对象]);

                 路由对象{path:'锚点'，component:要(填坑)显示的组件}

              5.将配置好的路由对象交给Vue

                 在options中传递-》key叫做router，

              6.留坑（使用组件）<router-view></router-view>
              
     -->
    <div id="app"></div>
    <script src="../vue.js"></script>
    <!-- 引入路由插件 -->
    <script src="../vue-router.js"></script>
    <script>
        var login={
            template:`<div>我是登录页面</div>`
        }
        // 安装路由插件
        Vue.use(VueRouter);
        // 创建路由对象
        var router = new VueRouter({
            // 配置路由
            routes: [
                {
                    path:`/login`,name:'login',component:login
                }
            ]
        })

        new Vue({
            el: "#app",
            router,
            template: `
              <div>
                <router-view></router-view>
              </div>
            `,
            data() {
                return {

                }
            }
        });
    </script>
</body>

</html>