首页 >web前端 >js教程 >vue.js中路由器的配置方法介绍

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

不言原创: 2018-08-23 16:09:062497浏览

本篇文章给大家带来的内容是关于vue.js中路由器的配置方法介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

在 vue 项目中装路由模块

npm install vue-router --save-dev

在配置路由之前，先来了解下 b988a8fd72e5e0e42afffd18f951b277 和 975b587bf85a482ea10b0a28848e78a4 标签
b988a8fd72e5e0e42afffd18f951b277 和 3499910bf9dac5ae3c52d5ede7383485 标签是一样的作用用于跳转

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

to 里面是地址，先不管他，因为 "/body" 是在配置路由时定义好的

975b587bf85a482ea10b0a28848e78a4 的作用：点击 b988a8fd72e5e0e42afffd18f951b277 时，将需要跳转到的页面显示在其中，有点像H5中的 04a0d55efbbfd646a993fbc01f262c57

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

配置路由器

在 main.js 文件中引进和配置路由器模块

//main.js

//引进路由器模块
import VueRouter from &#39;vue-router&#39;

//引进跳转的 组件页面地址
import App_head from &#39;./App_head&#39;
import body_z from &#39;./components/HelloWorld&#39;

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: &#39;#app_body&#39;,
  components: { App_body },
  template: &#39;<App_body/>&#39;
})

路由器定义好后，就配合b988a8fd72e5e0e42afffd18f951b277 和 975b587bf85a482ea10b0a28848e78a4 标签使用

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

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

配置路由器

相关文章