VUE路由的简单使用

VUE中如何使用路由？

路由的基本使用

1. 在html中 引入vue 和 vue-router 包

<script src="lib/vue.js"></script>
<script src="lib/vue-router.js"></script>

2. 创建vue对象并将vue对象和html标签关联

<div id="app"></div>

var vm = new Vue({
    el:"#app",
    data:{
    },
    method:{
    },
});

3. 创建模版对象 和 路由对象

var loginView = {
    template:'<h1>login</h1>'
}

var registerView = {
        template: '<h1>register</h1>'
    }

// 创建路由对象
var router = new VueRouter({
    routes:[{
        path:'/',
        redirect:'/login'
    },
    {
        path:'/login',
        component:loginView
    },
    {
        path:'/register',
        component:registerView
    }
    ]
});

4. router对象配置在 vue对象上

var vm = new Vue({
    el:"#app",
    data:{
    },
    method:{
    },
    // 在vue对象上配置router对象
    router
});

个人总结

• 路由的创建 引入vue-router模块 创建router对象
• router配置在到全局的VUE对象上可全局实现路由切换
• 路由本身就是一个js包，和HTML是兼容的可放在一起使用。
• 模块化，router 和 vue 并不相互依赖而是相互独立的。各自提供自己的功能

获取路由的参数

//1. 定义
var router = new VueRouter({
    routes:[{
        path:'/login/:id/:name',
        component:loginView
    }]
});

//2. 传参
<router-link to="/login/15/zs">登陆</router-link>

//3. 取值
template: '<h1>login---{{$route.params.id}}---{{$route.params.name}}</h1>'

路由嵌套

• 创建2个模版 两个模版相当于两个页面，路由就是这两个页面之间完成跳转 注意：两个模版是不能想div那样嵌套的，是独立的。

<!-- 创建两块模版 template  -->
<!-- template 1 -->
<div id="app">
    <div >
        <h1>账户</h1>
        <router-link to='/accont'>点击账户进入登录/注册页面</router-link>
        <router-view></router-view>
    </div>

</div>
<!-- template 2 -->
<template id="accont">
    <div>
        <!-- 路由指向 -->
        <router-link to="/accont/login/zhangsan/40">登陆</router-link>
        <router-link to="/accont/register">注册</router-link>
        <!-- 路由坑位 -->
        <router-view></router-view>
    </div>
</template>

• 设置路由：children 和 component 写在一起的，代表当前组件的子路由

{
    path:'/accont',
    component: accont,
    children: [{
                   path:'login/:id/:name',
                    component:loginView
                   },
                  {
                    path:'register',
                    component:registerView
                }]
},

Demo