vue.js定义一个一级的路由 ----由浅入深
#### 定义一个路由
- 实例化一个路由并设置路由映射表
- 实例化里面第一个参数 routes 路由映射表
- routes 里面参数
- path 路由的路径
- component 路由对应的组件
- 第二个参数 我们选中的样式指定
- 一般我们用默认样式router-link-active就行
- 指定样式语句 linkActiveClass:"aaa",
```
let routes=[
{
path:"/home",
component:home
}
]
const router=new VueRouter({
routes:routes,
linkActiveClass:"aaa",
})
```
- 实例化路由后，我们需要把路由挂载到Vue实例上
-
- router路由会在实例中提供两个属性
- this.$route(属性)
- this.$router(方法);
```
let vm=new Vue({
el:"#app",
router:router
})
```
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color:red;
}
/*当选中时候生效， / /list /add 只要以/开头就会生效*/
/*.router-link-active{*/
/*color:red;*/
/*}*/
/*当路径和名称相同时候，才会生效，一般用这个 */
/*.router-link-exact-active{*/
/*color:blue;*/
/*}*/
</style>
</head>
<body>
<div id="app">
<router-link to="/home" tag="li">去首页</router-link>
<router-link to="/list" tag="li">去list页</router-link>
<router-view></router-view>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
//定义两个组件
let Home={
template:"<div>Home</div>"
};
let List={
template:"<div>List</div>"
}
// 配置一个路由映射表,const防止被修改
const routes=[
{
//定义路径/home和对应Home的组件
path:"/home",
component:Home
},
{
//定义路径/list和对应List的组件
path:"/list",
component:List
}
]; //构建一个路由容器VueRouter
let router=new VueRouter({
//默认路由就是hash规格的，将路由映射表赋值给routes属性
routes:routes,
//更改选中时候的样式名称
linkActiveClass:'active',
// mode:'history' //使用h5api的history.pushstate()来改变路径
}); // 使用这个路由 let vm=new Vue({
el:"#app", // 将 router赋值给router属性，这时候就引入到实例中，
// 会在实例中提供两个属性this.$route(属性)，this.$router(方法);
router:router })
</script>
</html>
如果文章有帮助到您，请点右侧的推荐关注哈，O(∩_∩)O谢谢~ >>>>
vue.js定义一个一级的路由 ----由浅入深的更多相关文章
- vue.js 作一个用户表添加页面----初级
使用vue.js 制作一个用户表添加页面,实际上是把原来需要使用js写的部分,改写成vue.js的格式 首先,想象一下,先做思考,我们要添加用户表,设涉及到哪些数据,一个是用户id,一个是用户名,一个 ...
- Js定义一个表单并提交
Js定义一个表单 var form = $("<form>"); //定义一个form表单 form.attr('style', 'display:none'); // ...
- Vue.js 2.x笔记：路由Vue Router（6）
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- 用Vue.js开发一个电影App的前端界面
我们要构建一个什么样的App? 我们大多数人使用在线流媒体服务(如Netflix)观看我们最喜欢的电影或者节目.这篇文章将重点介绍如何通过使用vue.js 2 建立一个类似风格的电影流媒体WEB交互界 ...
- Vue.js实现一个SPA登录页面的过程
技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cooki ...
- 用Vue.js搭建一个小说阅读网站
目录 1.简介 2.如何使用vue.js 3.部署api服务器 4.vue.js路由配置 5.实现页面加载数据 6.测试vue项目 7.在正式环境部署 8.Vue前端代码下载 1.简介 这是一个使用v ...
- Vue.js写一个SPA登录页面的过程
技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cooki ...
- JS定义一个立即执行的可重用函数
我定义了一个函数表达式 testFun var testFun = (function() { ... //函数内容})(); 测试结果:虽然 testFun 函数有如愿在页面加载后立即被执行,但再次 ...
- js定义一个处理字符串的函数
//定义一个处理字符串的方法 function StringBuffer(str){ var arr = []; str = str || ''; arr.push(str); //追加字符串 thi ...
随机推荐
- 【weiphp】安装中报错
问题描述:安装的第三部报错“SQLSTATE[HY000]: General error: 2030 This command is not supported in the prepared sta ...
- [App Store Connect帮助]四、添加 App 图标、App 预览和屏幕快照（3）上传 App 预览和屏幕快照
请上传至多三个 App 预览和至多十张屏幕快照.如果您的 App 在不同设备尺寸和本地化内容间都相同,仅提供所要求的最高分辨率的屏幕快照即可. 对于 iPhone,必须提供用于 5.5 英寸设备(iP ...
- activiti遇到的问题
1.act_hi_detail表里面没有数据 原因是没有加历史变量的判断 2.流程图添加网关,写流转表达式 比如请假流程 大于3天小于5天的条件:${请假实体类.属性名称}
- 纵横填字map版(初始数据结构)
新数据结构设计: 定义一个map: key是横纵坐标字符串,比如“0,4” value是一个json,包含以下属性:字,横向的词(若 有的话,无的话,空串),纵向的词(若有的话,无的话,空串). 另有 ...
- 在Redux中使用插件createAction之后
我们知道在React的Redux的中的action在项目开发过程中,一般时使用createAction来生成 举个栗子,小李子: const createTodo=createACtion('CREA ...
- UVM基础之---------Reporting Classes
Reporting 类提供了一组工具用于格式化报告输出 report机制大概包括四个主要的类uvm_report_object,uvm_report_handler, uvm_report_serve ...
- spark查看stage和tasks信息
spark提供了web-ui接口.外部命令等多种方法监视spark程序的执行状态.利用spark的监视功能,可以方便的查看spark应用程序执行的状态,具体包括:1)stage和tasks列表信息 ...
- Spartan6系列之GTP Transceiver的介绍与使用
1. 什么是GTP transceiver? GTP transceiver是FPGA里一种线速度达500Mb/sà6.6Gb/s的收发器,利用FPGA内部可编程资源可对其进行灵活地配置, ...
- Windows Server 2008不能Ping改为允许的方法
用了Windows Server 2008朋友肯定都知道,2008在很多设置方面与2003不同,尤其在安全上进行了加强,例如:默认情况下Windows 2008是不允许PING的,那么如何打开允许PI ...
- SDK_进度条和滑块
进度条和滑块 进度条和滑块属于通用控件,通用控件的使用需要加 CommCtrl.h 头文件 如何初始化进度条和滑块的数值范围和默认的位置 // 设置默认的范围值SendDlgItemMessage(h ...