vue组件-路由

零.什么是路由

1. 每一组key-value对应关系，就是一个路由route
2. 路由器router，用于管理多个路由
3. 用于实现单页面应用
4. vue的一个插件库
5. 数据通过ajax请求获取

一.基本使用

1.安装：npm i vue-router
2.使用插件：Vue.use(VueRouter)
3.编写router配置项
    // 引入路由
    import VueRouter from 'vue-router';
    // 引入组件
    import home from '../components/home.vue'
    import home2 from '../components/home2.vue'
    // 创建路由
    export default new VueRouter({
        routes:[
          {
            path:'/home',
            component:home
        },
           {
            path:'/home2',
            component:home2
         },
        ]
      })
4.实现切换（active-class可以配置高亮）
    <router-link to="/home"> home1跳转</router-link> 【注意这里的路径，没有点.router实质上转成了a标签】
5.指定展示的位置
    <router-view></router-view>

二.注意点

1. 路由使用的组件放在pages文件夹，普通的组件放在components文件夹

2. 通过切换，实现展示不同组件的效果，原理是销毁了看不见的组件，需要的时候再去挂载

3. 每个组件都有自己的$route属性，里面存储的是组件的路由信息

4. 整个应用只有一个router，可以通过组件的$router属得到

5. 在多级路径中，字路径配置的时候，不能加/

多级路由

1.配置规则，使用chlidren配置项
    routes:[
    {
        path:'/home',
        component:home,
        children:[
            {
                // 注意这里不能加/
                path:'news',
                component:news
            },
        ]
    },
]
2.跳转(写完整路径)：
    <router-link to='/home/news'>xx</router-link>

三.路由命名：简化跳转

1.命名
routes:[
    {
        name:"h",
        path:'/home',
        component:home,
    },
]
2.简化跳转【注意要用to前面加冒号】：
<router-link  :to='{name:'h'}' >xx</router-link>

四.query传递参数

1.传递参数
第一种方法（to的字符串）：太复杂，跳过
第二种方法（to的对象）：
<router-link :to="{     【这里是对象形式，并且要在to前面加冒号】
    path:'/home/news/lists',  【这里写地址】
    query:{            【这里传递参数】
      listname:a.name,
      listid:a.id
        }
  }"></router-link>
2.接收参数
    传递给谁，那么谁的$route上面就有query对象
        使用：$route.query.listname
        使用：$route.query.listid

五.params传递参数

1.配置路由【声明】：
        routes:[
            {
                name:"h",
                path:'/home/:id/:name',  【这里要声明占位符声明接收params参数】
                component:home,
            },
        ]
2.传递参数：
    第一种方法（to的字符串写法）：<router-link ></router-link>
    第二种方法（to的对象写法）：
    <router-link :to="{     【这里是对象形式，并且要在to前面加冒号】
        name:'h',           【这里只能使用name！！！！！】
        params:{            【这里传递参数】
          listname:a.name,
          listid:a.id
            }
      }"></router-link>
3.接收参数
    $route.params.id

六.缓存路由组件

1.作用：防止不展示的路由被销毁
2.使用
      <keep-alive :include=”['组件名1','组件名2']“>   【不写include，就全部缓存】
        <router-view></router-view>
      </keep-alive>

七.路由的声明周期钩子

1.作用：路由组件独有的两个钩子，用于捕获组件的激活状态
2.activated:路由组件被激活时触发
  deactivated:路由组件失活时触发

八.路由器工作模式【hash和history】

1.对于url中，hash就是#及其后面的内容
2.hash值不会包含在http协议请求中，即hash值不会带给服务器
3.hash模式
    * 地址中永远带着*号，好用兼容性很好
    * 若以后将地址通过第三方手机分享，地址可能不合法
4.history模式
    * 兼容性相对较差，需要后端解决刷新404问

九.打包项目npm run build

1.项目打包后，生成的dist文件夹就是我们的项目【前端任务结束了】
2.不能直接打开html文件，需要部署到服务器上面才能运行
3.若硬要在本地访问，配置vue.config.js文件
    module.exports = {
        //使打包后的文件可以本地访问【不用部署到服务器】
        publicPath: './'
    }