脚本宝典收集整理的这篇文章主要介绍了Vue学习日记(三)——Vue路由管理vue-router,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
为了给读者更好的体验,去理解vue-router和下一篇介绍vuex,决定还是来一个实战教程来带大家更加的去深入理解vue-router,在这之前,读者先自行了解和去官网下载npm和node,附:npm官网
这里我采用vue-cli+webpack构建初始项目,在vue官网里面也有相关介绍,在这里我就手把手教大家一下吧,先通过控制台进入相关的文件目录下,然后输入
# 后面是注释
# $表示当前文件目录
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
# 运行项目my-preoject
$ npm run dev
经过上面简单的构建之后,一个项目的初始化就完成了,这里vue-cli和webpack已经帮我们弄好了文件目录结构和基本目录
在进行使用vue-router之前,我不得不也先介绍一下vue-router是什么?
它是一个vue.js下的路由组件,那什么是路由呢?网上有一大堆官方的介绍,相信对于小白是难以理解的,这里我就简单的说明一下吧。
其实路由也就是url,url是什么呢?url就是唯一资源定位符,简单的说,也就是标记页面的唯一存在的一个标签,就像https://www.baidu.com,这里的www.baidu.com就是唯一资源定位符,https就只是一种协议,规范计算机网络的通信协议。
介绍完这些,那么对于我们究竟该怎么用呢?
其实很简单,在平时当中,我们就经常碰到在一个网站里面点击链接会弹到另外一个页面,然后就可以发现他们的url改变了,而vue-router就是这样,在同个域名下(这里的域名是http://localhost:8080),改变域名后面的字符参数,比如http://localhost:8080/me和http://localhost:8080/you是两个不同的页面就是靠vue-router进行实现的。
如果你在之前没有安装vue-router的话,建议可以先去官网,看着文档使用npm安装一下,这里就不多做介绍了。
首先我先在项目my-project/src/components(存放组件的目录)里面添加两个文件me.vue和you.vue
// me.vue
<template>
<div>
我是me
</div>
</template>
<script type="text/ecmascript-6">
export default {}
</script>
<style scoped>
</style>
// you.vue
<template>
<div>
我是you
</div>
</template>
<script type="text/ecmascript-6">
export default {}
</script>
<style scoped>
</style>
然后修改my-project/src/router(存放路由相关信息的目录)下面修改index.js成
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 导入组件
import me from '../components/me'
import you from '../components/you'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
// 将组件命名到路由上,输入http://localhost:8080/#/me
// 即可进入不同的页面
{
path: '/me',
component: me
},
// 将组件命名到路由上,输入http://localhost:8080/#/you
// 即可进入不同的页面
{
path: '/you',
component: you
}
]
})
这样只会输入http://localhost:8080/#/me就会进到其他页面,是不是很简单,
那么我们怎么在页面里面进行跳转呢?
这就运用到了更有趣的知识了就是router-link你只要在你的组件的代码下输入
<router-link :to="/me">这里是跳转链接</router-link>
网页就自动跳转到http://localhost:8080/#/me页面了,但是这样总是不好的,因为,如果由于一些原因,我们想修改路由的名字(比如me改成him)就得改两个文件的信息,因此,vue团队也早就想好了,就是name属性,将my-project/src/router(存放路由相关信息的目录)下面修改index.js成
// ...
{
path: '/me',
name: 'me',
component: me
},
// ...
然后跳转就改成
<router-link :to="{ name: 'me'}">这里是跳转链接</router-link>
就可以进行跳转了
vue.$router.push('/me')
// ...
{
path: '/me',
name: 'me',
component: me,
children: [
{
path: 'him'
// ...
},
{
path: 'she'
// ...
}
]
},
// ...
其实还有很多高级应用场景,我就不一一列举出来了,因为这些其实最好还是上官方文档进行说明,我这里只是解释一下简单的用法,以及初学者可能对官方文档会有误解来进行说明一下,希望大家还是学会看API,附官网地址
以上是脚本宝典为你收集整理的Vue学习日记(三)——Vue路由管理vue-router全部内容,希望文章能够帮你解决Vue学习日记(三)——Vue路由管理vue-router所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。