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元素和组件引用 ...
随机推荐
- MongoDB 无法启动
提示 mongodb Mongod complains that there is no /data/db folder!! 解决方法:http://stackoverflow.com/questio ...
- Linux 之 搜索
locate - 文件名搜索命令 用于查找文件 格式为:locate 文件名 该命令用于查找符合条件的文件,它会去保存文件与目录名称的数据库内,查找合乎范本样式条件的文件或目录. 因为该命令是直接在数 ...
- Guava【google】
Guava 是什么? Guava是一种基于开源的Java库,其中包含谷歌正在由他们很多项目使用的很多核心库.这个库是为了方便编码,并减少编码错误.这个库提供用于集合,缓存,支持原语,并发性,常见注解, ...
- Codeforces #364 (Div. 2) D. As Fa（数学公式推导 或者二分）
数学推导的博客 http://codeforces.com/contest/701/problem/D 题目 推导的思路就是 : 让每个人乘车的时间相等 ,让每个人走路的时间相等. 在图上可以这么表 ...
- ZZNU - OJ - 2080 : A+B or A-B【暴力枚举】
2080 : A+B or A-B(点击左侧标题进入zznu原题页面) 时间限制:1 Sec 内存限制:0 MiB提交:8 答案正确:3 提交 状态 讨论区 题目描述 Give you three s ...
- 在vue中使用css预编辑器
vue中使用less 安装less依赖,npm install less less-loader --save vue中使用sass npm install --save-dev sass-loade ...
- JavaScript 廖
=============== JavaScript代码可以直接嵌在网页的任何地方,不过通常我们都把JavaScript代码放到<head>中 ======注释 // 以双斜杠开头直到行末 ...
- 1. vue如何实现双向数据绑定
- 洛谷P1346 电车【最短路】
题目:https://www.luogu.org/problemnew/show/P1346 题意:n个路口,每个路口有好几条轨道,默认指向给出的第一个路口. 如果要换到另外的轨道去需要按一次开关.问 ...
- transitionend事件 监听 fadeIn fadeOut 两个方法无效（动画结束时无法执行transitionend里面的代码）
//下面的例子证明 fadeIn() fadeOut() 不能使用transitionend事件进行监听. //说白了在fadeIn fadeOut 后面监听动画结束时,transitionend是不 ...