vue.js定义一个一级的路由 ----由浅入深
2017-09-06 20:22
651 查看
#### 定义一个路由
- 实例化一个路由并设置路由映射表
- 实例化里面第一个参数 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
})
```
实例
- 实例化一个路由并设置路由映射表
- 实例化里面第一个参数 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谢谢~ >>>>
相关文章推荐
- Bug记载2之Vue.JS路由定义的位置
- vue.js嵌套路由-------由浅入深
- Vue.js和Element ui学习笔记《二》 ----路由
- vue.js vue-router如何实现无效路由(404)的友好提示
- Vue.js结合vue-router和webpack编写单页路由项目
- vue.js用vue-router路由传参时页面刷新后参数消失的问题
- vue.js中的路由vue-router2.0使用
- Vue.js结合vue-router和webpack编写单页路由项目
- 使用vue.js路由后失效
- 【Vue】项目打包的时候,build.js文件过大,可以通过设置懒加载或者按照路由分模块加载进行打包
- Vue.js 中,7种定义组件模板的方法
- vue.js路由跳转详解
- 对于Vue-cli的路由跳转以及使用vue.js动态修改CSS样式
- vue中,js中路由跳转
- Ember.js 入门指南——路由定义
- Vue.js学习系列(八)---使用路由搭建单页应用(一)
- [js高手之路] vue系列教程 - 组件定义与使用上部(7)
- Ember.js API (v2.11.0) 翻译 ---004.Routing---002---Defining Your Routes Edit Page(定义你的路由)
- vue.js默认路由不加载linkActiveClass问题的解决方法
- 解决使用vue.js路由后失效的问题