[ Vue-cli 安装 ]

  • 项目开发: npm install -g @vue/cli
  • 快速原型开发（对单个 *.vue 文件开发）: npm install -g @vue/cli-service-global

[ 创建项目 ]

  • vue create Router-demo

[ 运行 ]

  • npm run serve

[ 目录 ]

  1. - public         => 静态资源文件  html icon 
  2. - src            => 入口文件 组件 路由 自己配置的静态资源文件
  3.   + assets       => 自己配置的静态资源文件
  4.   + components   => 公共组件
  5.   + router       => 设置路由
  6.   + views        => 视图组件 
  7.   + App.vue      => 所有组件的入口文件
  8.   + main.js      => 默认入口文件
  9. - .browserslistrc   => 目标浏览器配置
  10. - .babel.config.js  => babel 配置文件
  11. - .package.json     => 构建脚本和依赖关系

Vue-router 配置

引入组件并全局使用路由

  1. /**
  2.  *  router/index.js
  3.  */
  4. import Vue from 'vue';
  5. import Router from 'vue-router';
  6. //  1. 引入组件 
  7. import Home from '@/views/Home.vue';
  8. import Profile from '@/views/Profile.vue';
  9. import User from '@/views/User.vue';
  11. Vue.use(Router) // 全局使用 Router路由可以在所有的组件中使用

定义路由

  1. /**
  2.  *  router/index.js
  3.  */
  5. //  2. 设置路由映射表 将路由和组件关系映射起来
  6. const routes = [
  7.   {
  8.     path: '/',      // 
  9.     name: 'home',  // 命名路由
  10.     component: Home
  11.   },
  12.   {
  13.     path: '/profile', 
  14.     name: 'profile',
  15.     component: Profile 
  16.   },
  17.   {
  18.     path: '/user', 
  19.     name: 'user',
  20.     component: User 
  21.   },
  22.   // 如果 path 都不匹配 ,指定跳转路径
  23.   {
  24.     path: '*', 
  25.     // redirect: '/', 或者 
  26.     redirect: {
  27.       path:'/'
  28.     }
  29.   },
  30. ]

定义子路由

  1. {
  2.         path: '/user',
  3.         name: 'user',
  4.         component: User,
  5.         // 子级路由
  6.         children: [
  7.             {
  8.                 path: 'useradd',
  9.                 // 动态路由
  10.                 component: () => import('@/views/UserAdd.vue'),
  11.             },
  12.             {
  13.                 path: 'userlist',
  14.                 component: () => import('@/views/UserList.vue'),
  15.             },
  16.             {
  17.                 path: 'detail/:id',
  18.                 component: () => import('@/views/Detail.vue'),
  19.             },
  20.         ],
  21.     },
  23.     //  子路由 router 入口 to="/user/userlist"
  24.     <router-link to="/user/userlist">用户列表</router-link>

创建 router 实例

  1. /**
  2.  *  router/index.js
  3.  */
  5. //  3. 将 routes 放入 router 中进行渲染
  6. const router = new Router({
  7.   mode: 'history',  // 模式  其他值: "hash" | "history" | "abstract"
  8.   base: process.env.BASE_URL,
  9.   routes,
  10. })
  12. export default router

router 实例 注入到根实例进行渲染

  1. /**
  2.  *  src/main.js
  3.  */
  5. import Vue from 'vue'
  6. import App from './App.vue'
  7. import router from './router'
  9. Vue.config.productionTip = false
  11. new Vue({
  12.   router, // $royter(所有的方法) $route(所有的属性)
  13.   render: h => h(App)
  14. }).$mount('#app')

router-link

  1. <!-- App.vue -->
  3. <template>
  4.   <div id="app">
  5.     <div id="nav">
  6.       <!-- Router 入口 -->
  7.       <!-- <router-link to="/">Home</router-link> | -->
  8.       <!-- <router-link to="/profile">Profile</router-link> -->
  9.       <!-- <router-link to="/user">User</router-link> -->
  10.       <!-- Router 入口 动态写法 -->
  11.       <router-link :to="{path: '/'}">Home</router-link> |
  12.       <router-link :to="{name: 'profile'}">Profile</router-link>
  13.       <router-link to="/user">User</router-link>
  15.     </div>
  16.       <!-- Router 出口 -->
  17.     <router-view/>
  18.   </div>
  19. </template>