vue-router

概念：

• 什么是路由
  根据不同的url 加载不同的 vue 组件
• 什么是路由规则
  在浏览器上看到的 #/xxx 就是路由规则

• 路由规则的几种表现形式
  无参路由规则：

  • /Home
  • /Home/news

  有参路由规则

  • /Home/news/:id -> 传递 id 值
  • 如： /Home/news/15

---

使用：

注意：这个步骤是 vue2.x + vue-router2.x
1. 安装 cnpm install vue-router --save
2. 在项目的入口js文件中 main.js 中导入 vue-router
import VueRouter from 'vue-router'
3. 在main.js 中导入 Vue 对象并且利用 Vue 对象 .use(vueRouter);

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

4 配置路由规则

var router = new VueRouter({
    routes:[
        { 
            name: '路由规则名称，必须写',
            path: '路由规则的表现形式',
            component: '具体的一个 vue 组件' 
        },
        // 例如：
        { 
            name: 'Login',
            path: '/Account/Login',
            component: Login // 这里 Login组件 一定通过 import Login from 'Login.vue路径' 导入 
        }
    ]
});

5 要在实例化Vue对象的时候使用第4步中定义好的 routers 路由规则对象

    new Vue( {
        el: '#app',
        router,
        render:create=>create(App)
    });

6 注意点：
<router-view></router-view>

router-view 是一个占位符，会根据当前的路由规则将其对于的.vue 中文件内容替换到这个位置

生成超链接:

生成超链接, 建议使用 vue-router 提供的方式,router-link。
不建议自己编写 a 标签去设定 href

---

vue-router实例

app.vue

<template>
    <div class="tmpl">
        <!-- 官方不建议直接这么写死，建议用 router-link -->
        <!--<a href="#/Account/Login">登录</a>
        <a href="#/Account/Register">注册</a>-->

        <router-link to='/Account/Login'>登录</router-link>
        <router-link to='/Account/Register'>注册</router-link>

        <!-- 通过 router-view 来将组件渲染出来 -->
        <router-view></router-view>
    </div>
</template>

<script>
    export default{
        data() {
            return {}
        }
    }
</script>

main.js Login Register 就是普通的两个组件

// 1 导入相关包
import Vue from 'vue';
import VueRouter from 'vue-router'

// 1.1 导入相关 .vue 组件
import App from './App.vue'
import Login from './components/Login.vue'
import Register from './components/Register.vue'

// 2 在 vue 中加载 VueRouter
Vue.use( VueRouter );

// 3 定义路由规则对象
let router = new VueRouter({
    routes: [
        {
            name: 'Login',
            path: '/Account/Login',
            component: Login
        },
        {
            name: 'Register',
            path: '/Account/Register',
            component: Register
        }
    ]
})

// 4 使用 router
new Vue({
    el: '#app',
    router,
    render: create=>create(App)
})

---

vue-router 传参写法

假设我需要传 id 为 13 过去

<router-link to='/Account/Login/13'>登录</router-link>

// 对应的修改路由
let router = new VueRouter({
    routes: [
        {
            name: 'Login',
            path: '/Account/Login/:id',
            component: Login
        }
    ]
})

我们在子组件进行接收 this.$route.params.id 这个 id 是根据路由规则 :id 来的

<template>
    <div class="tmpl">
        登录组件
        传入的id = {{ this.$route.params.id }}
    </div>
</template>

而当需要传多个参数时可以继续 /Account/Login/:id/:name

{{ this.$route.params.id }}
{{ this.$route.params.name }}