路由的简单使用

1. router-link

默认会被渲染成一个 标签，通过传入 to 属性指定链接。

首页

2.router-view

路由匹配到的组件会渲染到router-view 中。

  

    首页
    分类
  
  
  
  

3. 路由js文件的配置

(1).如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)。

//router/ index.js

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

(2).使用import 导入路由组件。

import Home from 'pages/home';
import Category from 'pages/category';

(3).定义路由。

• name 路由名称，并且中的to属性也可以使用name匹配路由。
• path 路径，也与中的to属性进行匹配（常用的匹配方式）。
• component 组件，与(2)中导入路由组件的名称一致。

const routes = [
  {
    name:'home',
    path:'/home',
    component: Home
  },
  {
    name: 'category',
    path: '/category',
    component: Category
  }
]

(4).创建 router 实例，然后传 routes 配置，并把实例导出。（即（3）中的配置）

export default new Router({
  routes // (缩写) 相当于 routes: routes
});

(5). 使用vue-cli搭建的项目，有一个入口文件main.js 。在里面导入路由js文件，并挂载到vue实例中，这样整个项目都可以使用路由了。

import router from './router';

new Vue({
  router
});

(6). 最后在任何组件内通过 this.$router访问路由器，也可以通过 this.$route 访问当前路由。
(7). 当 对应的路由匹配成功，将自动设置 class 属性值.router-link-active。
例如点击首页的时候，如下第一个路由会设置.router-link-active类名。

 

    首页
    分类