vue复盘day3

1、路由模块封装

要先写在index.js里，再引入到main.js,记得在index.js里导入import Vue from 'vue'，然后还要export导出

2、声明式导航&导航高亮

eg:

3、声明式导航模糊匹配和精确匹配

模糊匹配：router-link-active

精确匹配：router-link-exact-active

4、要自起名定制上述两个名

直接在index.js中加

       1、linkActiveClass：

       2、linkExactActiveClass：

5、声明式导航--跳转传参

5.1、查询参数传参：适合传多个参数

    语法格式如下：和2高亮那里像，只不过to后加"/path?参数名=值"

                             接收值用$route.query.参数名 映射到网页

  eg：在home.vue中，高亮点击那写<router-link to="/search?key="黑马程序员>黑马程序员</rounter-link>

          在search.vue中，写<p>搜索关键字：{{$route.query.key}}来接收

5.1、动态路由传参：传单个参数比较方便

    语法格式如下：配置动态路由 直接加path：'/search/:words'

                            配置导航链接：to="/path/参数值"

                            接收传过来的值：$route.params.参数名

eg：在index.js中书写：path：'/search/:words'，：代表不精确

        在home.vue中，

        在search.vue中，

6、动态路由参数可选符

/search/:words?

7、路由重定向

语法：path：匹配路径，redirect：重定向到的路径、

8、vue路由404

直接加：path:'*',component:NotFind

9、vue路由设置

hash路由切换为history路由

直接加mode:"history"