Vue学习手记02 - 路由
1.项目
注意：项目在初始化的时候没有安装vue-router就需要进行安装
2.安装路由：
在项目中使用ctrl+`, 打开终端, 执行如下命令
npm i vue-router -S
或者
cnpm install vue-router --save
在一个模块化工程中使用
1.在main.js中必须要通过 Vue.use() 明确地安装路由功能：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
2.main.js创建路由
const router = new VueRouter({
routes:[
{
path:"/",
name:"HelloWorld",
component:HelloWorld
}
]
})
3.需要显示路由的位置
<router-view />
4.注入路由对象，在main.js中Vue实例中
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
在单页面里使用路由
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
<!--00- 引入vue-router.js -->
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<style>
.top {
background-color: orange;
height: 80px;
} .container {
display: flex;
} .left {
flex: 2;
background-color: lightgreen;
height: 500px;
} .main {
flex: 8;
background-color: lightpink;
height: 500px;
}
</style>
</head> <body>
<div id="app">
<div class="top">头部</div>
<div class="container">
<div class="left">
<!-- 01-router-link相当于链接 -->
<li>
<router-link to="/goods">我是goods</router-link>
</li>
<li>
<router-link to="/user">我是user</router-link>
</li>
</div>
<div class="main">
<!-- 01-router-view相当于占位 -->
<router-view></router-view>
</div>
</div>
</div>
<script>
// 02-创建两个组件
const goods = {
template: '<h3>goods内容</h3>'
}
const user = {
template: '<h3>user内容</h3>'
}
// 02-创建路由对象
// 在router对象中主要包含route路由规则,
// 一条路由规则一般由3部分组件
// - path: URL地址
// - name: 别名( 可以不写)
// - component: 对应的组件, 一个对象(组件参数)
const router = new VueRouter({
// routes是路由规则, 是一个数组每个元素都是一条具体的路由规则(route), 使得路由和组件绑定.
// 当URL匹配到路由规则时, 使用对应的组件替换<router-view>中的内容
routes: [
{ path: '/goods', component: goods },
{ path: '/user', component: user }
]
}) const vm = new Vue({
el: '#app',
data() {
return {
}
},
methods: {},
router: router, //03-把router挂载到Vue中 可省略为router
components: { //03-组件挂载
goods: goods,
user: user
}
});
</script>
</body> </html>
效果
小结
引入vue-router.js
创建router对象(路由规则)
path
component
创建组件
挂载组件
挂载router对象到vue实例中
Vue学习手记02 - 路由的更多相关文章
- vue学习记录④（路由传参）
通过上篇文章对路由的工作原理有了基本的了解,现在我们一起来学习路由是如何传递参数的,也就是带参数的跳转. 带参数的跳转,一般是两种方式: ①.a标签直接跳转. ②点击按钮,触发函数跳转. 在上篇文章中 ...
- vue学习笔记(十)路由
前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...
- Vue学习(三)-Vue-router路由的简单使用
一.Vue-Router环境的安装: 如果使用vue-cli脚手架搭建,项目创建过程中会提示你自否选择使用vue-router,选择使用即可, 二.路由学习 1.路由的配置 vue-cli项目自 ...
- Vue学习手记03-路由跳转与路由嵌套
1.路由跳转 添加一个LearnVue.vue文件, 在router->index.js中 引入import Learn from '@/components/LearnVue' 在touter ...
- Vue学习手记01-安装和项目创建
1.安装Vue 注:node版本必须大于等于8.9 vue-cli3.x:npm install -g @vue/cli vue-cli2.x:npm install -g @vue/cli-i ...
- vue学习记录③（路由）
上篇文章我们用vue-cli脚手架工具做了个简单的hello world页面,但是我们破坏了原来的流程,而正常的访问页面应该是通过路由来实现的. 那么什么是路由呢? 路由就是通过不同的url来访问不同 ...
- Vue学习手记09-mock与axios拦截的使用
01.安装 安装mock npm install mockjs 安装axios npm install axios 02.新建一个config.js文件做axios拦截 import axios fr ...
- Vue学习手记08-vue-cli的启动过程
分两种情况---无路由和有路由 无路由 看到启动页面 在文件main.js( vue项目的入口文件)中 这里可以看到,生成了一个全局的vue实例,绑定在了#app上面,也就是在文件index.html ...
- vue学习-day04（路由）
目录: 1.组件传值-父组件向子组件传值和data与props的区别 2.组件传值-子组件通过事件调用向父组件传值 3.案例:发表评论.使用ref获取DOM元素和组件引用 ...
随机推荐
- vue-quill-editor + iview 实现富文本编辑器及图片上传
1.npm 安装 vue-quill-editor npm install vue-quill-editor 2.再main.js中引入 import VueQuillEditor from 'vue ...
- OpenStack 2014.1(Icehouse) 更新说明
OpenStack 2014.1(Icehouse) 更新说明 1.综合升级说明 Windows安装包应使用PBR 0.8版本,以避免发生bug1294246 log-config选项 ...
- 运维开发笔记整理-创建django用户
运维开发笔记整理-创建django用户 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.创建普通用户 C:\Users\yinzhengjie\softwares\Pycharm ...
- 交付Dubbo微服务到kubernetes集群
1.基础架构 1.1.架构图 Zookeeper是Dubbo微服务集群的注册中心 它的高可用机制和k8s的etcd集群一致 java编写,需要jdk环境 1.2.节点规划 主机名 角色 ip hdss ...
- Spring中的资源文件框架——Resource
摘要 Spring4 以后,官方推荐我们使用Java Config来代替applicationContext.xml,声明将Bean交给容器管理. 在Spring Boot中,Java Config的 ...
- MyBatis3_[tp-26-27]_映射文件_select_返回List_记录封装Map:返回单个元素的Map或者整体Map集合
笔记要点出错分析与总结工程组织 1.定义接口 public interface EmployeeMapper { //多条记录封装到一个map中: Map<Integer,Employee> ...
- evpp下载1个文件
上传一个文件无错误 如何下载一个文件?? 集群?? http pdf 直接 redbuf
- 8 loader - 配置处理css样式表的第三方loader
// 使用import语法,导入css样式表 import './css/index.css' // 注意:webpack,默认只能打包处理JS类型的文件,无法处理其它的非JS类型的文件: // 如果 ...
- Meeting Rooms II
Description Given an array of meeting time intervals consisting of start and end times [[s1,e1],[s2, ...
- GeoJSON与GeoBuf互相转换
GeoJSON格式通常比较大,网页需要较长时间加载,可以使用GeoBuf进行压缩. 使用GeoBuf有很多好处:结构紧凑.文件小.方便编码和解码.能适用各种GeoJSON等等. 使用: 1.安装 ge ...