vue.js定义一个一级的路由 ----由浅入深

2018-06-24 00:08:49来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

#### 定义一个路由
- 实例化一个路由并设置路由映射表
- 实例化里面第一个参数 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谢谢~ >>>>

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:call,apply和bind的区别

下一篇:兼容低版本JS的Array.map方法