vue路由vue-router的安装及使用方式

一、路由安装

方式一：标签

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

方式二：终端

npm i -D vue-route

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

二、路由的创建及使用

1、创建两个组件的模板对象

var login = {
            template: '<h1>登录组件</h1>'
        }
var zhuce = {
            template: '<h1>注册组件</h1>'
        }

2、创建一个路由实例

// 创建全局路由对象
var router = new VueRouter({
            //route表示路由匹配规则routes代表很多规则
            // path代表监听的地址
            // component代表需要展示的哪个组件，当然前提示匹配到path中的地址
            // 注意：component中方的是组件模板对象名称，而非组件引用对象名称
            routes: [{
                path: '/',
                redirect: '/login' //默认展示登录界面
            }, {
                path: '/login',
                component: login
            }, {
                path: '/zhuce',
                component: zhuce
            }]
 })

3、注册到vm实例

router: router //将路由规则对象注册到vm实例上面，用来监听url地址，展示组件

4、放置路由需要显示组件的容器

 <router-view></router-view>

5、切换路由url地址的标签

<router-link to="login">登录</router-link>
<router-link to="zhuce">注册</router-link>

三、路由传参

方法一：query

<!-- 使用查询字符串传值 -->
<router-link to="login?id=10">登录</router-link>

var login = {
            // 直接使用$route.query.id
            template: '<h1>登录组件--{{$route.query.id}}--</h1>',
            created() {
                // $route是vue实例中的一个对象，query.id拿到参数
                console.log(this.$route.query.id)
            }
 }

方法二：params

{path: '/login/:id',component: login}//：代表占位符，用来传参

 <!-- 直接传值 -->
 <router-link to="login/12">登录</router-link>

//拿到参数
template: '<h1>登录组件--{{this.$route.params.id}}--</h1>',

四、路由的嵌套

var shouye = {
            template: '#temp'
        }
        var denglu = {
            template: '<h1>登录组件</h1>'
        }
        var zhuce = {
            template: '<h1>注册组件</h1>'
        }

        var luyou = new VueRouter({
            routes: [{
                path: '/shouye',
                component: shouye,
                //子路由的嵌套，children代表子路由
                children: [{
                    path: 'denglu',
                    component: denglu,
                }, {
                    path: 'zhuce',
                    component: zhuce,
                }]
            }]
        })
        var vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {

            },
            router: luyou
})

<div id="app">
        <router-link to="shouye">首页</router-link>
        <router-view></router-view>
    </div>
    <template id="temp">
        <div>
            <h1>这是首页</h1>
            <router-link to="/shouye/denglu">首页</router-link>
            <router-link to="/shouye/zhuce">注册</router-link>
            <router-view></router-view>
        </div>
</template>

五、其它

1、重定向： redirect

{path: '/',redirect: '/login'}//默认展示登录界面，且手动修改哈希值

2、定义路由高亮的类：router-link-active

 linkActiveClass: 'myactive'//修改router-link-active类名