npm install vue-router
在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
在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 }, ] })