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元素和组件引用 ...
随机推荐
- unity图片保留周边，中间延伸
1.先把图片切割,类似下面这样的 2.然后在使用的时候(选择图片类型的时候选择sliced)
- springboot系列（八）springboot整合mybatis
本篇介绍一下在springboot中整合mybatis ,使用mysql数据库,集成durid 连接池技术,全部代码是手动生成,没有使用代码生成器来构建代码. 一.创建数据库和表 二.在pom中添加依 ...
- 记录java+testng运行selenium（三）---xml、ini、excel、日志等配置
一: ini文件 ini目前只用处存储浏览类型及需要打开的url,ini文件放在configs文件夹下面. 读取ini代码如下: package toolskit.documents; import ...
- C语言面试题目之指针和数组
说明:所有题目均摘录于网络以及我所见过的面试题目,欢迎补充! 无特殊说明情况下,下面所有题s目都是linux下的32位C程序. 先来几个简单的热热身. 1.计算以下sizeof的值. char str ...
- RHEL/CentOS/Fedora各种源(EPEL、Remi、RPMForge、RPMFusion)
参考:RHEL/CentOS/Fedora各种源(EPEL.Remi.RPMForge.RPMFusion)配置 简介 CentOS 默认自带 CentOS-Base.repo 源, 但官方源中去除了 ...
- 算法102----360笔试（m进制不进位相加最大值）
转自:https://blog.csdn.net/qq_18310041/article/details/99656445 import copy # m进制 m = 5 n = 5 line = [ ...
- webuploader只选择单张图片
webuploader只选择单张图片 一.总结 一句话总结: 在WebUploader.create中配置一下pick即可 pick: { id: '#filePicker', multiple:fa ...
- Spring Boot起步依赖：定制starter
在定制我们自己的起步依赖--xxx.spring.boot.starter之前,我们先了解下什么是Spring Boot起步依赖. 起步依赖,是Spring Boot带给我们的一项重要的便利.要理解S ...
- 大数据之路week06--day07（虚拟机的克隆）
1.安装vmware,务必以管理员身份运行 操作系统(CentOS 6.5)的配置 准备工作:虚拟机安装三台linux 本次测试是 centos 6.5,(三台虚拟机的系统时间保持一致) *安装jd ...
- 解决在macOS下安装了python却没有pip命令的问题【经验总结】
可以使用brew直接安装python,但是安装完成了之后没有pip命令. pip是常用的python包管理工具,类似于java的maven.第一反应brew install pip,却提示没这货. 可 ...