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 中加载 VueRouterVue.use( VueRouter );// 3 定义路由规则对象let router = new VueRouter({    routes: [        {            name: 'Login',            path: '/Account/Login',            component: Login        },        {            name: 'Register',            path: '/Account/Register',            component: Register        }    ]})// 4 使用 routernew 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 }}