VUE快速上手（三）

vue路由

使用步骤：

1. 安装vue-router组件：npm install vue-router --save / cnpm install vue-router --save

2. 引入并使用vue-router (在main.js中)

   import VueRouter from "vue-router"
   Vue.use(VueRouter)
   

3. 配置路由
   3.1 创建组件

   import Home from './components/Home.vue'
   import News from './components/News.vue'
   

   3.2 定义路由

   const routes = [
     {path: '/home', component: Home},
     {path: '/news', component: News},
     {path: '*', component: Home} // 匹配不到时需要跳转的路径，可用作默认加载路径
   ]
   

   3.3 实例化VueRouter

   const router = new VueRouter({
     routes // 此处为routes: routes 的简写，如果修改了名称，则要写完整
   })
   

   3.4 挂载路由

   new Vue({
     el: '#app',
     router,
     render: h => h(App)
   })
   

   3.5 在根组件中放入<router-view></router-view>
   3.6 在根组件中加入<router-link to="路径"></router-link>可以实现路由的点击跳转

   <template>
     <div id="app">
       <router-link to="/home">首页</router-link>
       <router-link to="/news">新闻</router-link>
       <hr>
       <router-view></router-view>
     </div>
   </template>
   

   

动态路由传值

使用步骤：

1. 编写动态路由匹配的组件，并在需要用到动态路由的组件中使用
   Content.vue

   <template>
       <div id="content">
           <p>新闻内容</p>
       </div>
   </template>
   

   News.vue

   <template>
       <div id="news">
           <h2>News组件</h2>
           <ul>
               <li v-for="(news,key) in newsList">
               	<!-- 绑定key值到动态路由 -->
                   <router-link :to="'/content/' + key">{{key}} -- {{news}}</router-link>
               </li>
           </ul>
       </div>
   </template>
   <script>
   import VueEvent from '../model/VueEvent.js'
   export default {
       name: "news",
       data() {
           return {
               newsList: ['新闻1', '新闻2', '新闻3']
           }
       }
   }
   </script>
   

2. 在main.js中配置动态路由：

   import Content from './components/Content.vue'
   const routes = [
     {path: '/home', component: Home},
     {path: '/news', component: News},
     {path: '/content/:aid', component: Content},// 动态路由，aid为动态传值的参数名
     {path: '*', component: Home}
   ]
   

3. 在动态路由指向的组件中使用this.$route.params获取传递的值
   Content.vue

   <script>
   export default {
       name: "content",
       data() {
           return {
   
           }
       },
       mounted() {
           console.log(this.$route.params)
       }
   }
   </script>
   

get传值

get传值的使用方式与动态路由大体上相似，在配置和使用时略有不同。
使用步骤：

1. 同样的，编写动态路由匹配的组件，并在需要用到动态路由的组件中使用，此时用get传值的方式传递参数：?参数名=参数值

   <template>
       <div id="news">
           <h2>News组件</h2>
           <ul>
               <!-- 绑定key值到动态路由 -->
               <li v-for="(news,key) in newsList">
                   <router-link :to="'/content/?aid=' + key">{{key}} -- {{news}}</router-link>
               </li>
           </ul>
       </div>
   </template>
   

2. 配置路由，与普通路由一样

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

3. 在路由指向的组件中使用this.$route.query获取传递的值

路由的编程式导航

第1种方法：
在自定义的方法中使用this.$router.push({path: '路径'})的方式跳转路由
第2种方法：
在main.js中给路径起个别名：

const routes = [
  {path: '/home', component: Home},
  {path: '/news', component: News, name: 'news'} //name为路径别名
]

然后在自定义的方法中使用this.$router.push({name: '路径别名'})的方式跳转路由

路由的模式

vue路由的默认模式为hash模式，地址栏的url形式为：http://localhost:8080/#/news，可以在main.js中实例化router时加入mode: 'history'将路由的模式改为history模式，此时的地址栏url形式变为了：http://localhost:8080/news，这种方式也好看。

但是如果要用好history模式，还需要后端的配置支持。因为vue的项目是个单页面的应用，如果用户直接通过浏览器直接访问诸如 http://localhost:8080/content/1 这样的地址，就会返回404页面。

因此需要在后端做好覆盖所有情况的配置，如果匹配不到任何静态资源，则返回同一个html页面

路由的嵌套

在实际开发中，经常会有按某种结构进行嵌套的组件，例如：

在vue中使用嵌套路由可以实现对应的效果，步骤如下（以用户中心为例）：

1. 增加User组件，UserAdd组件和UserList组件，为方便管理，将UserAdd和UserList放到一个User目录中，并在User组件中使用者两个组件
   
   User.vue

   <template>
       <div id="user">
           <div class="user">
               <div class="left"><!-- 左侧面板 -->
               <ul>
                   <li>
                       <router-link to="/user/userAdd">增加用户</router-link><!-- 路由的链接 -->
                   </li>
                   <li>
                       <router-link to="/user/userList">用户列表</router-link>
                   </li>
               </ul>
           </div>
           <div class="right"><!-- 右侧面板 -->
               <router-view></router-view><!-- 在右侧内容区域放入 router-view -->
           </div>
           </div>
       </div>
   </template>
   <style lang="scss" scoped>
   .user {
       display: flex;
       .left {
           width: 200px;
           min-height: 400px;
           border-right: 1px solid #eee;
       }
   }
   </style>
   

2. 在main.js中配置嵌套路由

   import User from './components/User.vue'
     import UserAdd from './components/User/UserAdd.vue'  
     import UserList from './components/User/UserList.vue'  
     
   const routes = [
     {path: '/home', component: Home},
     {path: '/news', component: News, name: 'news'},
     {path: '*', component: Home},
     {path: '/content/:aid', component: Content},// 动态路由
     {
       path: '/user', 
       component: User,
       children: [// 嵌套的子路由
         {path: 'userAdd', component: UserAdd},//注意此处不能加"/"
         {path: 'userList', component: UserList},
       ]
     },
   ]