一起学vue——vue学习总路线
——————————^~^我是萌萌哒分割线^~^————————————————
前言
学这篇之前要先有的基础是vue-cli哦,不然不怎么看得懂哦。
安装vue-router
还记得之前再安装vue-cli的时候就用命令行安装过了vue-router,所以我就不用再在这个项目里安装了。
要单独安装的小伙伴先进入你的项目目录,再打开命令行,输入:npm install vue-router --save-dev
index.js
来看一下router文件夹下的index.js
从这里我们知道了,将vue组件添加到这里面就可以了。
这里解释一下那个path,就是我们在url地址栏里看到的#号后面那个斜杠
自定义组件
vue,是写单页面应用的,因此一个vue就是一个页面。清楚了上面的逻辑,现在我们自己写一个vue组件,取名叫hellovue.vue,在components文件夹下面。
1、新建文件hellovue.vue
2、hellovue.vue进行编码
之前我们有学过,在vue里面,有三部分构成,template、script、style
3、在index.js里引入
4、在index.js里配置
5、运行一下试试看
命令行:npm run dev
浏览器:http://localhost:8080/#/hellovue
制作导航栏
现在我们要切换页面的话,就是修改浏览器中的地址,那么,有什么便捷的方法呢?
router-link
导航链接,就像我们使用a来跳转页面一样
1、先看看他的语法
<router-link to="xxx">点击我跳转</router-link>
to后面是路径,这个路径填的就是在index.js里面配置路由的时候填的那个path
2、添加新的组件mycenter.vue
<template>
<div>
<p>name:{{name}}</p>
<p>age:{{age}}</p>
<p>address:{{address}}</p>
</div>
</template>
<script>
export default {
name:'mycenter',
data(){
return {
name:'vuecat',
age:2,
address:'sctu'
}
}
}
</script>
<style scoped>
p{color: rgb(148, 96, 235);}
</style>
像上面添加hellovue..vue一样,也是那种页面结构
3、在index.js里引入和配置
4、修改App.vue
5、运行
结语
看完这篇,基本的路由知识就知道了,也知道怎么跳转了,下一篇,就开始学习子路由。
——————————^~^我是萌萌哒分割线^~^————————————————
下一篇: