Vue-Router路由安装及使用

Vue-Router路由安装及使用

一、安装 vue-router 组件

Notes：在使用脚手架搭建Vue项目时可以选择安装vue-router组件，如果没有安装vue-router组件请看下面步骤。

1.脚手架安装

​ 在我们使用脚手架创建vue项目时会让我们选择是否安装vue-router，输入y就自动在创建vue项目时帮我们引入vue-router组件了。

2.手动安装

1、在项目目录路径下使用终端cmd命令

npm install vue-router --save

2、等待安装完成在src目录下新建router目录并在其下面新建index.js文件

3、在router/index.js文件中引入vue以及vue-router

import Vue from 'vue';
import Router from 'vue-router';
//引入相关页面
import Ranking from '../components/Ranking.vue';
import Music from '../views/music.vue';
//vue引入路由插件
Vue.use(Router);

export default new Router({
  mode: 'history',     //用来消除路径中的#/
  routes: [            //路由数组，其中每个对象都是一个页面信息
    {
      path: '/',       //虚拟路径path，也就是浏览器中的路径
      title: '排行榜',  
      component:() => import('../views/ranking.vue')  //组件页面地址
    },
    {
      path: '/music',
      title: '音乐',
      component: Music
    }
  ]
});

4、在main.js文件中引入vue-router组件，并在vue对象中实例化

Notes：引入vue-router组件需要使用router小写，切记不能命名Router，负责会报错。

5、在App.vue中使用标签

6、至此vue-router安装完毕 ！！！

二、vue-router的使用

1.准备好需要使用路由的页面

2.配置路由映射关系

export default new Router({
  mode: 'history',     //用来消除路径中的#/
  routes: [            //路由数组，其中每个对象都是一个页面信息
    {
      path: '/',       //虚拟路径path，也就是浏览器中的路径
      title: '排行榜',  
      component:() => import('../views/ranking.vue')  //组件页面地址
    },
    {
      path: '/music',
      title: '音乐',
      component: Music
    }
  ]
});

3.页面使用路由

<router-link to = "/music">点我跳转</router-link>

this.$router.push({ path: '/music' });

至此vue-router的安装与使用结束 ！！！