vue.js利用vue.router創建前端路由

node.js方式:

利用node.js安裝vue-router模塊

cnpm install vue-router

安裝完成后我們引入這個模板！

 

下載vue-router利用script引入方式:

我們也可以把vue-router下載下來

附上地址:https://unpkg.com/vue-router/dist/vue-router.js

在html里用<script>加載！

 

我們就以script為例

首先我們要引入vue.js在引入vue-router.js

vue-router.js依賴於vue.js

 

HTML:

<script type="text/javascript" src="vue.js></script>
<script type="text/javascript" src="vue-router.js></script>

<div id="app">

<h1>Hello router.js!</h1>

 

<!-- 使用 router-link 組件來導航. -->

<!-- 通過傳入 `to` 屬性指定鏈接. -->

<!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->

 

<router-link to="/router1">路由一</router-link>   <!------當我們點擊這標簽，它會觸發router1路由，然后會在router-view渲染出我們定義的組件，我們地址欄也會多出/router1-->

<router-link to="/router2">路由二</router-link>

 

 <router-view></router-view>  //  <-----這個是 我們路由要渲染地方，如果我們沒有router-view這個標簽，我們的路由就無法渲染到頁面-->

</div>      

 

JS:

第一步定義組件:

var router1 = {template:<div>我是路由組件一號</div>}

var router2 = {template:<div>我是路由組件二號</div>}

第二步定義路由:

var routers = [

 {path:"/router1",component:router1},

{path:"/router2",component:router2}

]

第三步創建路由的實例

var router = new VueRouter({

  routers                                             //routers=routers

 })

第四步創建和掛載實例

var vm = new Vue({

router

}).$mount("#app")

 

<!---最后附上router.js完整的教程地址---->

附上地址: http://router.vuejs.org/zh-cn/essentials/getting-started.html