vue_1

程序员文章站 2022-03-16 08:17:42

...

路由导航守卫（也叫路由拦截）


// 挂载路由导航守卫
router.beforeEach((to,from,next) => {
  // to 将访问哪一个路径
  // from 代表从哪个路径跳转而来
  // next 是一个函数，表示放行
  // next() 放行 next('/login') 强制跳转
  if(to.path === '/login') return next()
  // 获取token
  const token = window.sessionStorage.getItem('token')
  if(!token) return next('/login')
  next()
})

axios拦截器


import axios from 'axios'
// 配置请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// 拦截器
axios.interceptors.request.use(config => {
  // 登录授权 请求验证是否有token 需要授权API,必须在请求头中使用'Authorization' 字段提供'token'令牌
  config.headers.Authorization = window.sessionStorage.getItem('token');
  return config;
})
// 挂载vue原型上
Vue.prototype.$http = axios

子路由


import Home from '../components/Home.vue'
import Welcome from '../components/Welcome.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/home',
    component: Home ,
    children:[{ path: '/welcom', component: Welcome }]
  }
]

table里的作用域插槽


<el-table-column label="角色" prop="role_name"></el-table-column>
<el-table-column label="状态">
    <template slot-scope="scope">
        <!-- {{scope.row.mg_state}} -->
        <el-switch v-model="scope.row.mg_state">
        </el-switch>
    </template>
</el-table-column>