Vue-Router 使用

使用Vue Router 路由步驟以下：https://router.vuejs.org/zh

一、安裝路由 npm install vue-router --save 或者 cnpm install vue-router --save

二、引入路由，由於我使用的是腳手架因此直接在main.js 引入

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

三、配置路由

     A、建立組件、引入組件

    B、定義路由（建議官網複製）

// 2. 定義路由
// 每一個路由應該映射一個組件。 其中"component" 能夠是
// 經過 Vue.extend() 建立的組件構造器，
// 或者，只是一個組件配置對象。
// 咱們晚點再討論嵌套路由。
const routes = [
  { path: '/new', component: News },
  { path: '/blog', component: Blog},
  //默認跳轉路由

    { path: '/*', redirect: '/News' }

]

C、實例化VueRouter 

// 3. 建立 router 實例，而後傳 `routes` 配置
// 你還能夠傳別的配置參數, 不過先這麼簡單着吧。
const router = new VueRouter({
  routes // (縮寫) 至關於 routes: routes
})

D、掛載路由，在main.js裏掛載路由。

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

E、路由入口

//五、在跟組件模板裏放以下代碼

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

//表示路由組件顯示位置

 

 

具體代碼以下：

main.js代碼：

import Vue from 'vue'
import App from './App.vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
Vue.use(VueResource);
Vue.use(VueRouter);

//一、建立組件
import News from './components/News.vue';
import Blog from './components/Blog.vue';
//二、配置路由
const routes = [
  { path: '/new', component: News },
  { path: '/blog', component: Blog },
  //表示若是沒有匹配上路由就跳轉到new
  { path: '/*', redirect: '/new' }
]
//三、實例化Router
const router = new VueRouter({
  routes // (縮寫) 至關於 routes: routes
})
//四、掛載路由

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
//五、在跟組件模板裏放以下代碼
//<router-view></router-view>
//表示路由組件顯示位置

App.vue 代碼：

<template>
  <div id="app">
    <p>
    <!-- 使用 router-link 組件來導航. -->
    <!-- 經過傳入 `to` 屬性指定連接. -->
    <!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->
    <router-link to="/new">這是新聞</router-link>
    <router-link to="/blog">這是博客</router-link>
  </p>
  
   <router-view></router-view>
   </div>
</template>

<script>


export default {
  name: 'app',
  data () {
    return {
     
    }
  },methods:{
    
  }
}
</script>

<style>

</style>

其餘 News.vue 和Blog.vue是組件