vue.js中路由器的設定方法介紹

這篇文章帶給大家的內容是關於vue.js中路由器的設定方法介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

在vue 專案中裝  路由模組

npm install vue-router --save-dev

在設定路由之前，先來了解下 和   標籤
  和 標籤是一樣的作用用來跳轉

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

to 裡面是位址，先不管他，因為  "/body" 是在設定路由時定義好的

  的作用：點選 時，將需要跳到的頁面顯示在其中，有點像H5中的

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

路由器定義好後，就配合 和   標籤使用
 

<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中路由器的設定方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！