vue-router的使用和学习

路由的知识点

路由的知识点

1. vue 路由的mode(模式)有几种， 分别是什么？在那些环境下运行？

   • hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。

   • history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】

   • abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

路由的使用

1. 安装
   • 命令 npm i vue-router -S
2. 设置路由的文件夹（路由的模块）
   • 在src的目录下，创建一个路由的文件夹，在里面写index.js，
3. 在index.js里面操作
   • import命令执行，引入改引入的东西
   • 使用vue-router这个插件
   • vue-router实例化
     • 实例化里面的内容
       1. 路由表（必须要有，）

       - 既然路由实例里面有路由表，当然要写路由表啦（在index.js里面写）
       

       2. 路由的使用模式
       3. 路由的模块划分
   • 将这个实例导出

       import Vue from 'vue'
           import VueRouter from 'vue-router'
   
           //使用vue-router
           Vue.use(VueRouter)
   
           //路由表暂时没写（先看结构）
               //路由表
               routers=[
                   {},
                   {},
               ]
   
           //实例化
           const router = new VueRouter({
               routers,//路由表（必须要有）
               mode:'history',//,模式
               modules:{}
           })
   
           export default router
   

   • 详细的路由表（路由表的名称必须是routes，这是一个神奇的坑，如果写的不对，<router-view></router-view> 不显示）

       //路由表
     const  routes=[
           {
               path:'这里放的是路径',
               component:'这是是组件，import引入之后给其写成变量',
           },
           //下一个写一个二级路由
           {
               path:'路径',
               component:'组件',
               //里面是子路由
               children:[
                   {
                       path:'这里放的是路径',//但是不用加斜杠
                       component:'这是是组件，import引入之后给其写成变量',
                       name:'名字'//命名路由
                   },{
   
                   }
               ]
   
           },
       ]
   
   

   • 路由里面的重定向

       const routes = [
           {
               path: '/',
               redirect: '/home'   //重定向
           },
           {
               path: '/home',
               component: Home
           },
       ]
   

4. 在mian.js里面使用路由

Vue.config.productionTip = false
import router from '../src/router/index'

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

5. 在app.vue里面进行测试使用路由

<template>
  <div id="app">
    <h3>路由的展示</h3>
    <div class="container">
        <div class="row">
          <nav class="nav nav-tabs nav-stacked">
            <router-link class="nav-link" to = "/home"> home  </router-link>
            <router-link class="nav-link" to = "/list"> list </router-link>
            <router-link class="nav-link" to = "/movie">movie </router-link>
          </nav>
        </div>
        <div class="row">
          <!-- <router-view></router-view>  -->
        </div>
    </div>
  </div>
</template>