Vue路由的基本用法

1. vue路由是什么东西

      vue路由就是 vue-router  是 vue 页面中用于代替 html中的 a 标签 跳转页面的，只不过这个页面不是Html 是vue页面。

2.前置条件

检查 package.json

看  "dependencies"  节点 中是不是有类似

"vue-router": "^3.2.0"    

如果没有要加上后，重新在cmd中 ：  npm install       

在工程的router 目录中建立  index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const basicRoutes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import( '../views/About.vue')
  }
]

const routes = [...basicRoutes] ;

const router = new VueRouter({
  routes
})

export default router

然后检查 main.js

要求有 ：

import router from './router' 

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3.  路由的基本标签

 <router-link to="/">Home</router-link> :用于指定要去那一个vue页面。

<router-view/> ： 用于指定vue页面要显示的位置。

注意点：

同一层面<router-view/> 只有一个，router-link 有多个。

比如：

<div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
</div>

<div class='show'>

    <router-view/>

</div>

        表示有两个路径  home , about   可以被点击，它们对应的页面 都会被显示到  class = 'show' 的div中，也就是会形成页面切换的效果。

4. 路由js （router 目录中建立  index.js）中节点的解释

具体例子：

{
    path: '/about',
    name: 'About',
    component: () => import( '../views/About.vue')
  }

节点解释：

path :路径 ，router-link to= 的路径

name:vue页面中名字

component： vue页面的具体位置，注意相对路径

5. 子路由（在子页面中的切换）

在子页面test8中 

            <ul class="cleft">
                 <li><router-link to="/ts8/red">red</router-link></li>
                 <li><router-link to="/ts8/green">green</router-link></li>
                 <li><router-link to="/ts8/blue">blue</router-link></li>
             </ul>
             <div class="cright">
               <router-view/>
             </div>

路由js中配置

{
   path: '/ts8',
   name: 'Test8',
   component: () => import('../views/test8.vue'),
   children:[
       {
         path: '/ts8/red',
         name: 'Red',
         component: () => import('../views/children/red.vue')
       },
       {
         path: '/ts8/green',
         name: 'Green',
         component: () => import('../views/children/green.vue')
       },
       {
         path: '/ts8/blue',
         name: 'Blue',
         component: () => import('../views/children/blue.vue')
       }              
   ]
 }

然后写3个vue页面（/red.vue，green.vue，blue.vue）在  views/children  中

我们就可以在子页面中切换 这3个页面了。

6. 路由js的拆分

         router 目录中的 index.js是必不可少的，但有的时候会有内容太多的问题需要拆分，这里讲下如何拆分。

1.把要拆出来的内容写到和 index.js 同目录下的另一个 js中 （比如叫 ev.js）

写法如下：

const routes = [
    {
      path: '/ev1',
      name: 'Ev1',
      component: () => import('../views/el/ev1.vue')
    },
    {
      path: '/ev2',
      name: 'Ev2',
      component: () => import('../views/el/ev2.vue')
    },
    {
      path: '/ev3',
      name: 'Ev3',
      component: () => import('../views/el/ev3.vue')
    }            
] 

export default routes ;

2. 在 index.js 中 导入这个 js 

import EArr from './ev.js'

3.  用剩余运算符加到返回的数组中

const routes = [...basicRoutes,...EArr] ;