【Vue】——vue-router的路由

Vue的路由

---

引入vue-route

npm install vue-router

编写route.js

//引入vue（必要）
import Vue from 'vue'
//引入vue-route(必要)
import Router from 'vue-router'

//使用route（必要）
Vue.use(Router)

export default new Router({
	//加入这句话，可以不用地址栏带上#键
  mode: 'history',
  base: process.env.BASE_URL,
  //配置路由列表
  routes: [
    {
    	//路由uri
      path: '/',
      //重定向的view目录下的名称
      redirect: '/index'
    },
    {
      path: '/index',
      component: Index,
      redirect: '/index/main',
      //子路由列表项，一般是组件
      children: [
        {
          path: 'main',
          name: 'index-main',
          //组件导入
          component: () => import('./components/index/index-main')
        },
        {
          path: 'follow',
          name: 'index-follow',
          component: () => import('./components/index/index-follow')
        },
        {
          path: 'hot',
          name: 'index-hot',
          component: () => import('./components/index/index-hot')
        }
      ]
    },
    {
      path: '/publishArticle',
      name: 'PublishArticle',
      component: () => import('./views/publishArticle')
    },
    {
      path: '/article',
      name: 'Article',
      component: () => import('./views/article')
    },
    {
      path: '/found',
      name: 'Found',
      component: () => import('./views/found')
    },
    {
      path: '/login',
      name: 'Login',
      component: () => import('./views/login/login')
    },
    {
      path: '/answer',
      redirect: '/answer/recommend',
      component: () => import('./views/answer'),
      children: [
        {
          path: 'recommend',
          component: () => import('./components/answer/recommend')
        },
        {
          path: 'hot',
          component: () => import('./components/answer/hot')
        },
        {
          path: 'new',
          component: () => import('./components/answer/new')
        },
        {
          path: 'invite',
          component: () => import('./components/answer/invite')
        }
      ]
    }
  ]
})

main.js中挂载vue-route

import Vue from 'vue'
//把刚刚编写的route.js引入
import router from './router'

Vue.config.productionTip = false
Vue.use(ElementUI)

new Vue({
//把route挂载到App.vue上
  router,
  store,
  render: h => h(App)
}).$mount('#app')

第一种路由：template在需要的地方加入route-link

常用于固定的点击跳转

<router-link to="/publishArticle">写文章</router-link>

第二种路由：js中编程式路由

用this.$router.push()的方式进行跳转，括号里name是与上面route.js中配置的name属性相对应的，这句话是跳转到name为Found的页面

this.$router.push({name: Found});