Vue之路由篇

最近在学习vue框架，对于vue-router进行了一下总结。
路由，通俗来说功能相当于就是实现页面的跳转。

1.想要使用路由，首先得下载：npm install vue-router --save

2.编写路由三步骤：

• 定义路由组件
• 注册路由
• 使用路由

下面，便来仔细说说怎么走这三步骤。

3

• 定义路由组件

路由，相当于组件，即首先要建立路由文件夹，views是我建立路由组件文件夹的名称。

建立的.vue文件都是待会我们要用到的文件。接着我们开始配置路由器模块，另建立一个文件夹：router,新建js文件，我命名为index.js，在里面配置路由器模块：
index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import About from "../views/About.vue";
import Home from "../views/Home.vue";
import News from "../views/News.vue";
import Message from "../views/Message.vue";
import MessageDetail from "../views/MessageDetail.vue";
Vue.use(VueRouter)

export default new VueRouter({
  //配置n个路由
   routes:[
     {
       path:'/about',
       component:About
     },

     {
       path:'/home',
       component:Home,

       //嵌套路由
       children:[
         {
           path:'news',//path最左侧的/永远代表根路由
           component:News
         },
         {
           path:'message',//简化写法/hone/message
           component:Message,
           //嵌套路由
           children:[
             {
               path:'/home/message/detail/:id',
               component:MessageDetail
             }
           ]
         },
         {
           path:'',//简化写法
           redirect:'news'
         }
       ]
     },
     //默认显示
     {
       path:'/',
       redirect:'/about'
     }
   ]
})

其中，children[]表示嵌套路由，即在一个路由组件中再定义路由。
至此，配置路由便完成了。

• 注册路由
  在main.js文件中进行

//路由组件
import Vue from 'vue'
import  App from './App.vue'
import router from './router'

new Vue({//配置对象的属性名都是一些确定的名称，不能随便修改
  el:'#app',
  components:{App},
  template:'<App/>',
  router
})

• 使用路由
  接下来，我们便可以直接在.vue文件中使用路由标签 <router-link> <router-view>了
  如我的app.vue中：

 <template>
<div>
  <div class="row">
    <div class="col-xs-offset-2 col-xs-8">
      <div class="page-header">
        <h2>Router Basic -01</h2>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-2 col-xs-offset-2">
      <div class="list-group">
        <router-link class="list-group-item" to="/about">About</router-link>
        <router-link class="list-group-item" to="/home">Home</router-link>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="panel">
        <div class="panel-body">
<!--          路由组件的缓存keep-alive-->
          <keep-alive>
            <router-view msg="abc"></router-view>
          </keep-alive>
        </div>
      </div>
    </div>
  </div>
</div>
</template>
<script>
  //引入组件
    export default {
  }
</script>
<style scoped>
</style>

效果如下图：