vue笔记（6）

路由

vue-router

安装

终端中运行 npm i vue-router@3.5.2 -S (版本号必带)

引用

index.js界面

main.js界面

使用路由

1.// 导入需要的组件
import Login from '@/components/MyLogin.vue'
import Home from '@/components/MyHome.vue'
2.
routes: [
        //path  'hash'地址  component组件名 redirect  显示
      { path: '/login', component: Login}
      {
          path: '/home',
          component: Home,
          redirect: '/home/users',  将path /home 指向 /home/users  redirect重定向
          children: [  子路由
        { path: 'users', component: Users },
         
]

为路由添加id 增加复用性

vue：    <router-link to="/Movie/1">洛基</router-link>
         <router-link to="/Movie/2">雷神</router-link>
         <router-link to="/Movie/3">钢铁侠</router-link>
index：  {path:'/Movie/:id',component:Movie},   id为自定也名
在Movie.vue 中可用 props：['id']来接收值

     

编程式页面跳转路由  push  replace   back  forward

push：this.$router.push('/Movie/1')  会生成历史记录
replace： this.$router.replace('/Movie/1') 不会生成历史记录
back：this.$router.back() 后退
forward：this.$router.forward() 前进

 创建 移除 token  （判断密码是否正确）

        localStorage.setItem('token','Bearer li')

        localStorage.removeItem('token')

全局项目守卫  to 要去的路由页面   from跳转前的路由页面  

router.beforeEach((to,from,next)=>{
  if(to.path==='/Home'){      如果要去的哈希地址为home
    if(localStorage.getItem('token')){       获取token值 
      next()
    }else{
      next('/')
    }
  }else{
     next()
  }
  next()
})

设置vant 全局样式

首先将main.js中的  

 改为     

 

// 这个文件是 vue-cli 创建出来的项目的配置文件
// 在 vue.config.js 这个配置文件中，可以对整个项目的打包、构建进行全局性的配置

// webpack 在进行打包的时候，底层用到了 node.js
// 因此,在 vue.config.js 配置文件中，可以导入并使用 node.js 中的核心模块
const path = require('path')
const themePath = path.join(__dirname, './src/theme.less')

module.exports = {
  publicPath: './',
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          // 直接覆盖变量
          // 'nav-bar-background-color': 'orange'
          // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
          hack: `true; @import "${themePath}";`
        }
      }
    }
  }
}

在src文件夹中新建一个less文件 

// 在 theme.less 文件中，覆盖 Vant 官方的 less 变量值
@blue: #007bff;

// 覆盖 Navbar 的 less 样式
@nav-bar-background-color: @blue;
@nav-bar-title-text-color: #fff;