Vue学习笔记-Vue.js-2.X 学习(七)===>脚手架Vue-CLI(路由Router)
脚手架Vue-CLI(路由Router)
一 按装(通过新创建脚手架按装),如果在原来的脚手架上按装直接进图型化界面vue ui的插件按装.
二 使用(上面按装下面步骤自动会生成)
第一步:导入路由对象,并且调用Vue.use(VueRouter)
第二步:创建路由实例,并且传入路由映射配置
第三步:导出路由实例
第四步:在Vue实例中挂载创建的路由实例
第五步:使用路由,通过<router-link>和<router-view>
<router-link>是vuerouter内置的一个组件,默认被渲染成为一个<a>标签(还可以渲染成其它标签,后面补充)
<router-view>该标签会根据当前的路径,动态渲染出不同的组件,组件占位,放到哪里就会把对应的组件渲染到哪里
1.入口代码: main.js
//项目的启动入口
//导入文
import Vue from 'vue'
import App from './App.vue'
import router from './router' //发布产品终端下显示提示(true)
Vue.config.productionTip = false //创建Vue根实例,配置路由router
new Vue({
router, // 第四步:在Vue实例中挂载创建的路由实例
render: h => h(App)
}).$mount('#app')
入口代码:main.js
2.单页面的入口节点代码: public下的 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<!-- 单页面的入口节点-->
<!-- 最终所有组件会被render替换渲染到这里-->
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
单页面的入口节点代码: public下的 index.html
3.根组件代码: App.vue
<template>
<!--根组件-->
<div id="app">
<!--第五步:使用路由,通过<router-link>和<router-view>-->
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<!--路由出口,组件占位,组件渲染显示的位置-->
<router-view/>
</div>
</template> <style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
} #nav {
padding: 30px;
} #nav a {
font-weight: bold;
color: #2c3e50;
} #nav a.router-link-exact-active {
color: #42b983;
}
</style>
根组件代码: App.vu
4.路由代码: router下的index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue' //导入Home组件 // 第一步:导入路由对象,并且调用Vue.use(VueRouter)
Vue.use(VueRouter)
// 第二步:创建路由实例,并且传入路由映射配置,一个组件一个映射关系
const routes = [
{
path: '/', //显示组件路径
// component: Home //组件名,路径显示为:http://localhost:8080/#/
redirect: '/Home' //重定向到首页,路径显示为:http://localhost:8080/#/Home
},
{
path: '/Home', //显示组件路径
name: 'Home',
component: Home //组件名
},
{
path: '/about', //显示组件路径
name: 'About', //组件名
// 懒加载,当访问路由时延迟加载.导入About组件
component: () => import(
/* webpackChunkName:
"about" */ '../views/About.vue'
)
}
]
// 第三步：导出 routes 为 router
const router = new VueRouter({
routes
})
export default router
路由代码: router下的index.js
5.路由映射配置重定向配置redirect
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue' //导入Home组件 // 第一步:导入路由对象,并且调用Vue.use(VueRouter)
Vue.use(VueRouter)
// 第二步:创建路由实例,并且传入路由映射配置,一个组件一个映射关系
const routes = [
{
path: '/', //显示组件路径
// component: Home //组件名,路径显示为:http://localhost:8080/#/
redirect: '/Home' //重定向到首页,路径显示为:http://localhost:8080/#/Home
},
{
path: '/Home', //显示组件路径
name: 'Home',
component: Home //组件名
},
{
path: '/about', //显示组件路径
name: 'About', //组件名
// 懒加载,当访问路由时延迟加载.导入About组件
component: () => import(
/* webpackChunkName:
"about" */ '../views/About.vue'
)
}
]
// 第三步：导出 routes 为 router
const router = new VueRouter({
routes
})
export default router
路由映射配置重定向配置redirect
6.路由的默认值模式和history模式(路由中有无#号)
默认哈希模式显示: http://localhost:8080/#/Home,
history模式显示: http://localhost:8080/Home
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue' //导入Home组件 // 第一步:导入路由对象,并且调用Vue.use(VueRouter)
Vue.use(VueRouter)
// 第二步:创建路由实例,并且传入路由映射配置,一个组件一个映射关系
const routes = [
{
path: '/', //显示组件路径
// component: Home //组件名,路径显示为:http://localhost:8080/#/
redirect: '/Home' //重定向到首页,路径显示为:http://localhost:8080/#/Home
},
{
path: '/Home', //显示组件路径
name: 'Home',
component: Home //组件名
},
{
path: '/about', //显示组件路径
name: 'About', //组件名
// 懒加载,当访问路由时延迟加载.导入About组件
component: () => import(/* webpackChunkName:"about" */ '../views/About.vue')
}
]
// 第三步：导出 routes 为 router
const router = new VueRouter({
routes,
mode:'history' //默认哈希模式http://localhost:8080/#/Home,html5中history模式,http://localhost:8080/Home
})
export default router
路由的默认值模式和history模式
7.<router-link>属性补充
to属性: <router-link to="/">Home</router-link> 默认渲染成<a>标签
tag属性: <router-link to="/" tag="button">Home</router-link> 渲染成<button>按钮,可以渲染成其它标签
replace属性: <router-link to="/" replace">Home</router-link> 网页返回按钮不起作用,多个<router-link>同时加上
active-class属性: 当<router-link>对应的路由匹配成功时,会自动给当前元素设置一个rouer-link-active 的class(class="router-link-active)
<template>
<!--根组件-->
<div id="app">
<!--第五步:使用路由,通过<router-link>和<router-view>-->
<div id="nav">
<!--默认渲染成<a>标签-->
<!-- <router-link to="/">Home</router-link> |-->
<!--tag="button"渲染成<button>按钮-->
<!-- <router-link to="/" tag="button">Home</router-link> |-->
<!--replace网页返回按钮不起作用,多个<router-link>同时加上-->
<router-link to="/" replace>Home</router-link> |
<router-link to="/about" replace>About</router-link>
</div>
<!--路由出口,组件占位,组件渲染显示的位置-->
<router-view/>
</div>
</template> <style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
} #nav {
padding: 30px;
} #nav a {
font-weight: bold;
color: #2c3e50;
} #nav a.router-link-exact-active {
color: #42b983;
}
</style>
router-link属性补充
8.动态路由
Vue学习笔记-Vue.js-2.X 学习(七)===>脚手架Vue-CLI(路由Router)的更多相关文章
- 【学习笔记】jQuery的基础学习
[学习笔记]jQuery的基础学习 新建 模板 小书匠 什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果 ...
- 【学习笔记】JavaScript的基础学习
[学习笔记]JavaScript的基础学习 一 变量 1 变量命名规则 Camel 标记法 首字母是小写的,接下来的字母都以大写字符开头.例如: var myTestValue = 0, mySeco ...
- 《Java学习笔记(第8版)》学习指导
<Java学习笔记(第8版)>学习指导 目录 图书简况 学习指导 第一章 Java平台概论 第二章 从JDK到IDE 第三章 基础语法 第四章 认识对象 第五章 对象封装 第六章 继承与多 ...
- 20145213《Java程序设计学习笔记》第六周学习总结
20145213<Java程序设计学习笔记>第六周学习总结 说在前面的话 上篇博客中娄老师指出我因为数据结构基础薄弱,才导致对第九章内容浅尝遏止地认知.在这里我还要自我批评一下,其实我事后 ...
- Hadoop学习笔记(10) ——搭建源码学习环境
Hadoop学习笔记(10) ——搭建源码学习环境 上一章中,我们对整个hadoop的目录及源码目录有了一个初步的了解,接下来计划深入学习一下这头神象作品了.但是看代码用什么,难不成gedit?,单步 ...
- Linux学习笔记（11）linux网络管理与配置之一——配置路由与默认网关，双网卡绑定（5-6）
Linux学习笔记(11)linux网络管理与配置之一——配置路由与默认网关,双网卡绑定(5-6) 大纲目录 0.常用linux基础网络命令 1.配置主机名 2.配置网卡信息与IP地址 3.配置DNS ...
- Vue.js 学习笔记 第2章 数据绑定和第一个Vue应用
本篇目录: 2.1 Vue实例与数据绑定 2.2 指令与事件 2.3 语法糖 学习任何一种框架,从一个Hello World应用开始是最快了解该框架特性的途径. 我们先从一段简单的HTML代码开始,感 ...
- .NET学习笔记（1）— C#学习路线图
目录 一:引言 二:.NET技术体系 三:常用工具汇总 四:学习资源汇总 五:书籍推荐 六:关于阅读技术书籍的经验 七:总结 一:引言 因为工作调整,从PHP开发零基础转型到.NET开发,前期没有 ...
- Deep Q-Network 学习笔记（一）—— Q-Learning 学习与实现过程中碰到的一些坑
这方面的资料比较零散,学起来各种碰壁,碰到各种问题,这里就做下学习记录. 参考资料: https://morvanzhou.github.io/ 非常感谢莫烦老师的教程 http://mnemstud ...
- 学习笔记TF045:人工智能、深度学习、TensorFlow、比赛、公司
人工智能,用计算机实现人类智能.机器通过大量训练数据训练,程序不断自我学习.修正训练模型.模型本质,一堆参数,描述业务特点.机器学习和深度学习(结合深度神经网络). 传统计算机器下棋,贪婪算法,Alp ...
随机推荐
- .Net技术栈下的异步,你还在用同步方式进行开发吗?
关于异步,其实是个老生常谈的话题,也是各大公司面试常问的问题之一.本文就几个点来介绍异步解决的问题 注:对多线程的运行的基本机制要了解 1.介绍 有人可能会有疑问,为什么并行,非得用异步.多线程也已可 ...
- 使用VisualStudio直接运行简单的C#语句
场景 经常有这样的需求, 想要测试一些简单的C#语法, 或者测试一下 文件 目录 操作相关的Api, 通常的做法是建立一个C#控制台项目, 然后写代码测试, 但是这样的做法对测试简单的语法和Api来说 ...
- 宝塔Linux面板FTP无法连接的解决办法
我使用的是阿里云服务器,需要在安全组设置中,对22.21端口放行,并且被动端口(39000 - 40000)也需要处于放行状态(即是指在阿里云安全组的添加端口范围为 39000/40000 的设置) ...
- 2019牛客暑期多校训练营（第五场）I.three points 1(暴力几何)
题意:现在给你一个矩形边框 一个三角形的三边长 现在问你能否把三角形放入矩阵边框中 并且输出三个点的坐标 思路:我们可以发现如果一定有解 我们就可以让一个点在左下角(0,0)处 还有一个点在矩形边上 ...
- AT1219 歴史の研究 回滚莫队
可在vj上提交:https://vjudge.net/problem/AtCoder-joisc2014_c 题意: IOI 国历史研究的第一人--JOI 教授,最近获得了一份被认为是古代 IOI 国 ...
- 【noi 2.6_9271】奶牛散步（DP）
这题与前面的"踩方格"重复了,而且是大坑题!题目漏写了取模12345的条件! 详细解析请见我之前的博文--http://www.cnblogs.com/konjak/p/59368 ...
- c语言实现链表增、删、改、查及文件读写 && 链表实现程序
一.链表实现增删改查 1.链表定义 1 #include<stdio.h> 2 #include<string.h> 3 #include<windows.h> 4 ...
- python Crypto 加密解密
本片文字记录使用python 的Crypto 工具对图片或者文本进行加密解密的方法: import numpy as np from PIL import Image from base64 impo ...
- Python：装饰器是如何调用的
应用举例:(1)装饰器 # 装饰器的调用: # 一旦用上装饰器会: # 第一步:调outer函数 # 第二步:被装饰的函数play_game会被当作参数fn给outer # 第三步:最后调用play_ ...
- MySQL 多实例及其主从复制
目录 Mysql 实例 Mysql 多实例 创建多实例目录 编辑配置文件 初始化多实例数据目录 授权目录 启动多实例 连接多实例并验证 Mysql 多实例设置密码 设置密码后连接 Mysql 多实例主 ...