vue-router 基本使用(一)

一、路由定义理解

       1、路由，其实就是指向，当我点击页面home按钮时，就显示home内容，点击about按钮时就显示about内容，可以理解为

home按钮=>home内容，about按钮=>about内容的一 一对应的映射关系。

      2、路由中有三个基本的概念 route, routes, router

route:表示一条路由，home按钮=>home内容是一条路由；

routes:表示一组路由，[{home按钮=>home内容},{about按钮=>about}]

router:是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。

3、客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api.

二、路由安装

npm install vue-router --save

三、路由的实现

      1、页面实现（html模板块）

• 定义点击部分<router-link></router-link>
• 定义内容显示部分<router-view></router-view>

   <router-link> 还有一个非常重要的属性 to，定义点击之后，要到哪里去

<router-link  to="/home">Home</router-link>
<router-link  to="/about">About</router-link>
<router-view></router-view>

      2、js配置路由

        首先要定义route,  一条路由的实现。它是一个对象，由两个部分组成： path和component,  path 指路径，component 指的是组件，例如配置home和about路径

const routes = [
    {path:'/home',component:'Home'},
    {path:'/about',component:'About'}
];

     3、创建router，对路由进行管理，由构造函数new VueRouter()创建，接受routes参数

var router = new VueRouter({
    routes     //routes:routes
});

     4.配置完成后，把router实例注入到vue跟实例中，就可以使用路由了

const app = new Vue({
    router
}).$mount("#app");

     整个router.js代码     

import Home from "./components/Home"
import About from "./components/About"
import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter);
//定义路由每个路由应该映射一个组件
const routes = [
    {
        path: "/home",
        name: "home",
        component: Home
      },
    {
        path: '/about',
        name:"about",
        component:About
    }
];

//创建router实例，然后出入'routes'配置
const router = new VueRouter({
    routes:routes
});

export default router;

      5、执行过程

      当用户点击<router-link>标签时,会去寻找它的to属性，它to属性和js配置的路径{path:'/home',component:Home}中的path一 一 对应，从而找到匹配的组件，最后把组件渲染到<router-view>标签上。

四、源码下载

https://github.com/wanghongzheng/my_vue

五、效果

原文连接：https://www.cnblogs.com/SamWeb/p/6610733.html，这个讲的特别仔细，非常通俗易懂。