路由、Vant组件库

一、路由的概念

• 前端路由：路径和组件的映射关系。

• 路由作用：实现业务场景切换。

• 单页面应用：所有的业务都在一个页面中编写，有一个html

• 单页面应用优点：

  • 整体不刷新页面，用户体验更好。

  • 数据传递容易，开发效率高

• 单页面应用缺点：

  • 开发成本高

  • 首次加载会比较慢一点。不利于seo

• 单页面应用想要切换场景需要依赖路由。

二、使用路由

• 实现路由：vue-router（暂时安装3.5.1版本）

• 页面组件放在 views 中，复用组件用在components 中

• 安装使用：

  • 下载：yarn add [email protected]

  • 引入：import VueRouter from "vue-router"

  • 注册全局组件：Vue.use(VueRouter)

  • 规则数组：const routes = [ { path:"/find", component:Find }, { path:"/my", component:My }, { path:"/part", component:Part } ]

  • 生成路由对象：const router = new VueRouter ({routes})

  • 关联到vue实例：new Vue({router,....})

  • components换成router-view（在APP.vue中）:

  • 引入页面：

    import Find from '@/views/Find'

  • import My from '@/views/My'

  • import Part from '@/views/Part'

  • 以上操作都是在main.js中，引入的文件是在src下的views中创建的，@表示src的绝对路径

三、声明式导航

• 可以用组件router-link来替代a标签：

  • router-link 替代a标签

  • to属性 替代href属性

• 好处：router-link自带高亮的类名(激活时类名)

四、声明式导航——跳转传参

1. 方式1：

   • to"/path?参数名=值”

   • 接收：$route.query.参数名

2. 方式2：

   • (1): 路由规则path上 定义 /path/:参数名

   • (2): to="/path/值"

   • 接收: $route.params.参数名

五、路由-404

• 404表示地址错误，可以创建一个NotFound页面，在main.js - 修改路由配置（记得写在最后，因为页面是从上往下加载的）

六、路由——模式设置

• 修改路由在地址栏的模式

• 在生成路由对象中加：const router = new VueRouter({ routes, mode: "history" // 打包上线后需要后台支持, 模式是hash })

七、编程式导航

• 是用js代码来进行跳转的

• path和name任选一个

  • 语法1：this.$router.push({path:'路由路径'})

  • 语法2：this.$router.push({name:'路由名'}) (要记得在main.js中添加name属性)

• 注意：虽然用name跳转，但是url的hash值还是切换path路径值

• 场景：

  • 方便修改：name路由名（在页面上看不见随便定义，所以建议使用name）

  • path可以在url的hash值看到（所以尽量符合规范）

八、编程式导航——传参

• 注意：path会忽略params，name在query和params中可以任选一个

this.$router.push({
    path: "路由路径"
    name: "路由名",
    query: {
    	"参数名": 值
    }
    params: {
		"参数名": 值
    }
})

// 对应路由接收   $route.params.参数名   取值
// 对应路由接收   $route.query.参数名    取值

九、路由嵌套

• 在现有的一级路由下，还可以进行二级嵌套

const routes = [
  // ...省略其他
  {
    path: "/find",
    name: "Find",
    component: Find,
    children: [  // 这里children就是二级嵌套内容，也还可以进行嵌套，
    // 注意：这个单词不要写错，这是固定写法；path不用斜杠。
      {
        path: "recommend",
        component: Recommend
      },
      {
        path: "ranking",
        component: Ranking
      },
      {
        path: "songlist",
        component: SongList
      }
    ]
  }
  // ...省略其他
]

十、声明式导航——激活类名区别

• url上hash值（#/home/recommend)包含导航的href值 （#/home) - 当前a就有"router-link-active"（模糊）

• url上hash值（#/home/recommend)等于导航的href值（#/home/recommend) - 当前a就有"router-link-active"(精确)

十一、路由守卫

• 场景：当你要对路由权限判断时

• 语法：router.beforeEach((to,from,next)=>{//路由跳转“之前”先执行这里，决定是否跳转})

  • 参数1：要跳转到的路由（路由对象信息）目标
  • 参数2：从哪里跳转的路由（路由对象信息）来源
  • 参数3：函数体 - next()才会让路由正常的跳转切换，next(false)在原地停留，next("强制修改到另一个路由路径上")
  • 注意：一定要调next()，不然会停留在原地

• // 目标: 路由守卫
  // 场景: 当你要对路由权限判断时
  // 语法: router.beforeEach((to, from, next)=>{//路由跳转"之前"先执行这里, 决定是否跳转})
  // 参数1: 要跳转到的路由 (路由对象信息)    目标
  // 参数2: 从哪里跳转的路由 (路由对象信息)  来源
  // 参数3: 函数体 - next()才会让路由正常的跳转切换, next(false)在原地停留, next("强制修改到另一个路由路径上")
  // 注意: 如果不调用next, 页面留在原地
  
  // 例子: 判断用户是否登录, 是否决定去"我的音乐"/my
  const isLogin = true; // 登录状态(未登录)
  router.beforeEach((to, from, next) => {
    if (to.path === "/my" && isLogin === false) {
      alert("请登录")
      next(false) // 阻止路由跳转
    } else {
      next() // 正常放行
    }
  })

十二、vant组件库

• 是一个轻量，可靠的移动端vue组件库，开箱即用

• 用v2版本（2.12.44）；

• 使用方法1：Vant支持一次导入所有的组件，但是这样会增加代码包的体积，所以不推荐这样使用；

• 使用方法2：手动按需导入，但是当需要的组件较多时，得一个一个手动导入，所以比较麻烦；

• 使用方法：自动按需导入，推荐使用

// 1.安装插件
yarn add babel-plugin-import -D
// 2.在babel配置文件里 (babel.config.js)(注意，如果本来就有这个文件，里面的内容不要删除，可以加在里面
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};
// 3.全局注册 - 会自动按需引入
import { Button } from 'vant';
Vue.use(Button);
import { Image as VanImage } from 'vant';
Vue.use(VanImage);

// 如果有多个的话，可以按下面方法去写：
import { Button , Image as VanImage , Form,Field,Picker} from 'vant';
Vue.use(Button);
Vue.use(VanImage);
Vue.use(Form);
Vue.use(Field);
Vue.use(Picker);