vue学习（四） vue-loader vue-router vue-cli

最新推荐文章于 2024-07-05 09:53:04 发布

sJohnny

最新推荐文章于 2024-07-05 09:53:04 发布

阅读量1.4k

点赞数

分类专栏： vue学习文章标签： vue-loader vue-router vue-cli vue

本文链接：https://blog.csdn.net/sJohnny/article/details/59123467

版权

本文详细介绍了如何使用vue-router进行路由配置，包括路由的引入、v-link的使用和路由嵌套。接着讲解了vue-loader的作用，它是编译.vue文件的关键。最后，阐述了vue-cli的安装与使用，包括不同项目模板的创建及其差异，如simple、webpack和webpack-simple，并提到了版本选择的灵活性。

摘要由CSDN通过智能技术生成

vue-router

SPA: SinglePageApplication
     单页面应用程序
vue在实现单页面应用程序，要借助他的路由，即vue-router

下载vue-router，在页面中引入相关的模块

具体使用代码过程：

首先引入vue和vue-router
在html里写相关的链接，这里链接还是通过a标签来定义，但是通过 v-link来绑定链接的地址
再通过router-view ，把相关的内容呈现在router-view里
js部分，一共分为五步，定义根组件、准备路由对应的组件、准备路由、关联、开启

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--引入vue 和 vue-router-->
    <script src="bower_components/vue/dist/vue.js"></script>
    <script src="bower_components/vue-router/dist/vue-router.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li>
                <a v-link="{path:'/home'}">主页</a>
            </li>
            <li>
                <a v-link="{path:'/news'}">新闻</a>
            </li>
        </

最低0.47元/天解锁文章

sJohnny

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习（四） vue-loader vue-router vue-cli

vue-routerSPA: SinglePageApplication 单页面应用程序vue在实现单页面应用程序，要借助他的路由，即vue-router下载vue-router，在页面中引入相关的模块具体使用代码过程：首先引入vue和vue-router在html里写相关的链接，这里链接还是通过a标签来定义，但是通过 v-link来绑定链接的地址再通过router-view ，
复制链接

扫一扫

专栏目录