本篇文章给大家带来的内容是关于vue.js中路由器的配置方法介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
在 vue 项目中装 路由模块
npm install vue-router --save-dev
在配置路由之前，先来了解下
点我跳转页面
to 里面是地址，先不管他，因为 "/body" 是在配置路由时定义好的
配置路由器
在 main.js 文件中引进和配置路由器模块
立即学习“前端免费学习笔记（深入）”；
爱克网络企业网站建设系统 No.090730
下载
系统特点：功能简洁实用。目前互联网上最简洁的企业网站建设系统！原创程序代码。非网络一般下载后修改的代码。更安全。速度快！界面模版分离。原创的分离思路，完全不同于其他方式，不一样的简单感受！搜索引擎优化。做了基础的seo优化。对搜索引擎更友好系统功能关于我们：介绍企业介绍类信息，可自由添加多个介绍栏目！资讯中心：公司或行业资讯类内容展示。可自由添加多个资讯内容！产品展示：支持类别设置，可添加产品图片
//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为 "/" 意思是： 标签初始显示的地址
//component为上面 组件名
{path:"/",component:App_head},
{path:"/body",component:body_z}
],
mode:"history" //定义这个后，打开网页，8080后面不会跟着 /#/ 的符号
});
new Vue({
router, //记得在这里定义路由器，否则不能使用
el: '#app_body',
components: { App_body },
template: ' 路由器定义好后，就配合
//点击后，跳转到http://localhost:8080/body //点击后，将显示 HelloWorld 组件的内容 跳转页面
相关推荐：
