vue路由搭建

接上一篇搭建好结构的基础上，安装vue-router

cnpm install vue-router

src目录下添加Content.vue，Date.vue和route.js

//Date.vue

 

//Content.vue

//route.js

import Vue from 'vue'
import Router from 'vue-router'
import Da from './Date.vue'
import Content from './Content.vue'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/content',
      component: Content
    },
    {
      path: '/date',
      component: Da
    }
  ]
})

App.vue template结构改成

main.js引入route.js,并注入模块中

//Main.js
import Vue from 'vue';
import App from './App.vue';
import router from './route'

new Vue({
  el:'#app',
  router,
  components: {App},
  render: h => h(App),
  mounted:function(){console.log('hello world')}
})

至此简单的路由功能已经搭建完成。组件中可以通过this.$router和this.$route访问路由器和当前路由。

要使用动态路由，例如date/xiaogang，只需要将router-link链接改成需要的

date

route.js

{
    path: '/date/:name',
    component: Da
}

Date.vue,使用this.$route.params.name就能获取到对应数据

computed:{
    name(){
        return this.$route.params.name
    }
},

关于重定向，只要设置redirect,默认跳转content组件

{
    path: '/',
    redirect:'/content',
    component: Content
}