Vue脚手架----路由管理器

---

页面应用

.

什么是多页面应用？

指一个网站中有多个页面，每一次页面跳转的时候，后台服务器都会返回一个新的HTML文档，JS文件、CSS文件、图片都会重新加载，无论是公共的还是独有的。

多页面应用的优点：

• 首个页面展示速度快

• 搜索引擎优化效果好

多页面应用缺点：

• 页面切换慢（每一次都要发起一个请求）

什么是单页面应用？

• 指一个网站中只有一个html页面的应用，是一种从 Web服务器加载的富客户端，单页面跳转仅刷新局部资源
• JS文件、CSS文件和图片文件仅加载一次
• 第一次进入页面时会请求一个 HTML 文件，刷新清除一些，切换到其他组件，此时路径也相应变化，但是并没有新的 HTML 文件。
• 局部刷新的内容是js动态生成的。

单页面应用的优点：

• 页面切换快（只发起了一次http请求，刷新局部资源时为js动态生成）

单页面应用的缺点：

• 首个页面展示速度慢

• 搜索引擎优化效果差

---

VueRouter的开始

.

• Vue Router 是 Vue.js 的官方路由。
• 让 Vue 更容易构建单页面应用。

VueRouter的特点：

• vue-router和vue.js是深度集成的,适合用于单页面应用.
• 传统的路由是用一些超链接来实现页面切换和跳转.而vue-router在单页面应用中,则是组件之间的切换.其本质就是:建立并管理url和对应组件之间的映射关系.

VueRouter的路由配置：

1. 安装VueRouter

   npm install vue-router
   

   

2. src中的main.js中导入VueRouter

   import VueRouter from "vue-router";
   

3. 安装路由功能

   Vue.use(VueRouter)
   

配置完VueRouter的简单使用：

1. src目录下创建routers模块 views模块下创建Home.vue和About.vue组件：
   

2. routers模块中创建routers.js并创建VueRouter实例导出：

   import VueRouter from "vue-router";
   
   // 导入组件
   import Home from '../views/Home'
   import About from '../views/About'
   
   
   // 定义路由
   const routes = [
   	// path为访问路径 component为组件
       { path: '/home', component: Home },
       { path: '/about', component: About }
   ]
   
   
   // 创建router实例并导出
   const router = new VueRouter({
   	// 传入定义的路由  由routes: routes简写而成
       routes
   })
   // 导出实例
   export default router
   

3. main.js中挂载到Vue实例上：

   // 导入router
   import router from './routers/routers'
   
   new Vue({
   	// 也是简写 由: router:router
       router,
       render: (h) => h(App),
   }).$mount("#app");
   

4. App.vue中定义路由链接🔗和组件显示位置：

   • <router-link to="类似于a标签的href"><router-link>
   • <router-view></router-view>定义组件显示的位置

     <div id="app">
       <div id="nav">
         <h3>根组件</h3>
         <router-link to="/home">Home页面</router-link> |
         <router-link to="/about">About页面</router-link>
       </div>
       <router-view></router-view>
     </div>
   

5. 组件模板内添加内容：

   <template>
       <div class="about">
           <h3>Home页面</h3>
       </div>
   </template>
   
   <script>
   export default {
   
   }
   </script>
   
   <style>
   
   </style>
   

6. 运行项目

VueRouter的嵌套使用（嵌套路由）：

• views模块中放的组件为 “大组件”，通常为一整个页面
• components中的组件为一个页面中的一个功能，所以为 “小组件”
• 所以就有了嵌套路由，类似于大组件中嵌套小组件

1. components模块中创建home页面内的“小组件”

   

   <template>
           <div class="banner">
           <h3>Home页面>>>>>banner</h3>
       </div>
   </template>
   
   <script>
   export default {
   
   }
   </script>
   
   <style>
   
   </style>
   

2. routers模块中导入组件 定义嵌套路由

   • 语法：

   const routes = [
   	{
   		// 定义的路由1 
   		path: 访问路径,
   		component: 导入的组件,
   		children: [嵌套路由和定义路由是`套娃形式`]
   	},
   	{
   		// 路由2
   	},
   	{
   		// 路由3
   	}
   
   ]
   

   // 定义路由
   const routes = [
   
       {
           path: '/home',
           component: Home,
           // 嵌套路由语法  children : 数组 （数组内方式和定义路由一样）
           children: [{
               path: 'banner',
               component: Banner
           }, {
               path: 'slide',
               component: Slide
           }]
       },
       {
           path: '/about',
           component: About
       }
   ]
   

3. App.vue中声明 router-link并声明url

         <router-link to="/home/banner"> banner</router-link>|
         <router-link to="/home/slide">slide</router-link>|
   

4. 因为是Home.vue组件的子路由，所以Home.vue组件中显示组件

       <div class="home">
           <h3>Home页面</h3>
           <router-view></router-view>
       </div>
   

5. 运行项目：