本篇文章给大家带来的内容是关于vue.js中路由器的配置方法介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
在 vue 项目中装  路由模块
npm install vue-router --save-dev
在配置路由之前，先来了解下 <router-link> 和 <router-view> 标签
<router-link> 和 <a> 标签是一样的作用用于跳转
<router-link to="/body">点我跳转页面</router-link>
to 里面是地址，先不管他，因为 "/body" 是在配置路由时定义好的
<router-view> 的作用：点击 <router-link> 时，将需要跳转到的页面显示在其中，有点像h5中的 <frame>
<div> <router-view></router-view></div>
配置路由器在 main.js 文件中引进和配置路由器模块
//main.js//引进路由器模块import vuerouter from 'vue-router'//引进跳转的 组件页面地址import app_head from './app_head'import body_z from './components/helloworld'vue.config.productiontip = false;vue.use(vuerouter);//配置路由器const router = new vuerouter({ routes:[ //path为 "/" 意思是：<router-view> 标签初始显示的地址 //component为上面 组件名 {path:"/",component:app_head}, {path:"/body",component:body_z} ], mode:"history" //定义这个后，打开网页，8080后面不会跟着 /#/ 的符号});new vue({ router, //记得在这里定义路由器，否则不能使用 el: '#app_body', components: { app_body }, template: '<app_body/>'})
路由器定义好后，就配合<router-link> 和 <router-view> 标签使用
<div> //点击后，跳转到http://localhost:8080/body //点击后，<router-view>将显示 helloworld 组件的内容 <router-link to="/body">跳转页面</router-link> <router-view></router-view></div>
相关推荐：
vue.js的嵌套路由(子路由)
vue.js的路由命名和命名视图
以上就是vue.js中路由器的配置方法介绍的详细内容。