vue-router

概念：

什么是路由
根据不同的url 加载不同的 vue 组件
什么是路由规则
在浏览器上看到的 #/xxx 就是路由规则
路由规则的几种表现形式
无参路由规则：
- /Home
- /Home/news
有参路由规则
- /Home/news/:id -> 传递 id 值
- 如： /Home/news/15

使用：

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

import Vue from 'vue'
(VueRouter)

4 配置路由规则

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

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实例

<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>

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

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

// 2 在 vue 中加载 VueRouter
( 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.$ 这个 id 是根据路由规则 :id 来的

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

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

{{ this.$ }}
{{ this.$ }}

概念：

使用：

vue-router实例

vue-router 传参写法

相关文章