本文主要是介绍vue-router安装和路由的基本用法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

官网：https://router.vuejs.org/zh/

1.在终端使用npm安装

npm install vue-router

2.创建路由模块

在src源代码目录下，新建router/index.js路由模块，并且初始化如下代码：

//1.导入Vue和VueRouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'

//2.调用Vue.use()函数，把VueRouter安装为Vue的插件
Vue.use(VueRouter)

//3.创建路由的实例对象
const router =new VueRouter()

//4,向外共享路由的实例对象
export default router

3.配置

在vue项目中，要想把路由用起来，必须把路由实例对象，通过下面的方式进行挂载

在main.js文件中导入路由模块
在进行模块化导入的时候，如果给定的是文件夹，则默认导入这个文件夹下，名字叫做index.js的文件

路由的基本用法

<!-- 当安装和配置了 vue-router 后，就可以使用 router-link 来替代普通的 a 链接了 -->
	//普通的a链接
    <!-- <a href="#/home">首页</a> -->
    //更改后 可以将to理解为herf属性
    <router-link to="/home">首页</router-link>
  

在路由里面配置选项（定义hash地址与组件之间的对应关系）

举例

先导入

// 导入需要的组件
import Home from '@/components/Home.vue'

// 创建路由的实例对象
const router = new VueRouter({
  // routes 是一个数组，作用：定义 “hash 地址” 与 “组件” 之间的对应关系
  routes: [
    // 重定向的路由规则：用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面。
    //通过路由规则的redirect属性，指定一个新的路由地址，可以很方便的设置出路由的重定向
    { path: '/', redirect: '/home' },
    // 路由规则
    //component:为要展示的组件
    { path: '/home', component: Home },
    
  ]
})

这篇关于vue-router安装和路由的基本用法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！