vue.js中路由器的配置方法介绍

npm install vue-router --save-dev

<router-link to="/body">点我跳转页面</router-link>

<div>
 <router-view></router-view>
</div>

//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/>'
})

<div>
 //点击后，跳转到http://localhost:8080/body 
 //点击后，<router-view>将显示 HelloWorld 组件的内容
 <router-link to="/body">跳转页面</router-link> 
 <router-view></router-view>
</div>