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元素和组件引用 ...
随机推荐
- Java 函数调用是传值还是传引用？ 从字节码角度来看看！
原文地址:点击打开
- Gitlab-CI +Docker + Docker-Compose构建可持续集成java项目的镜像
先注册好Runner: https://www.cnblogs.com/zsifan/p/11714788.html 以及搭建Java和Maven环境: https://www.cnblogs.com ...
- 【HCIA Gauss】学习汇总-数据库管理(数据库设计 范式 索引 分区)-7
zsql user/pasword@ip:port -c "show databases" # 展示一条sql语句 spool file_path 指定输出文件 可以为相对路径 s ...
- Keras Conv1d 参数及输入输出详解
Conv1d(in_channels,out_channels,kernel_size,stride=1,padding=0,dilation=1,groups=1,bias=True) filter ...
- Kubernetes 1.14发布：对Windows节点的生产级支持、Kubectl更新与持久本地卷通用版本已全面到来
今天,我们高兴地宣布Kubernetes 1.14版本的正式亮相,这亦是我们在2019年当中进行的首次发布!Kubernetes 1.14版本由31项增强功能组成,具体包括:10项稳定版功能,12项b ...
- PAT_B1013
这道题就是一道打印素数表的题目,本人使用的是筛选法,用bool数组记录是否为素数,每一次筛掉本轮数字的倍数,如果当前数字bool数组对应位置为false,则为素数. 这道题的坑是:你不知道最大第100 ...
- 回归分析特征选择（包括Stepwise算法） python 实现
# -*- coding: utf-8 -*-"""Created on Sat Aug 18 16:23:17 2018 @author: acadsoc"& ...
- 复杂json后端解析出现第二层无数据的问题
自从使用了lombok之后写代码更加爽了 但是突然遇到前端小姐姐传的对象中的数组后端接收不到,查了好长时间无果后就搁置了. 今天突然想找找什么原因.自己写了一个测试的案例,经过测试过后发现是lombo ...
- Vue中img的src属性绑定
正确:<img :src=" 'files/'+value.src "> 或 <img :src="value.src">错误:< ...
- P2P技术之STUN、TURN、ICE详解
现在大多数计算机主机都位于防火墙或NAT之后,很少有计算机直接接入Internet.通常,人们希望网络中两天计算机能直接进行通信(P2P通信),而不是需要其他公共服务器的中转. 由于主机位于防火墙或N ...