Vue全家桶

一个游离的指针

于 2025-03-24 10:48:04 发布

阅读量768

点赞数 13

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/2301_81192892/article/details/146423420

版权

VueRouter：

配置router里设置的index.js文件：

引入Vue，引入VueRouter，引入显示的组件

创造router实例：Vue.use（VueRouter）

配置路由表：const routes:[ {path:'',name:'',component:},{路径，路由名，显示组件} ]

配置路由：const router = new VueRouter（{mode：'history',base:process.env.BASE_URL,routes}）

最后导出的是export defalut router

配置main.js文件：

引入router（不是VueRouter的模组，是index.js中导出的router）

在new Vue中添加router：new Vue（{router，store（Vuex）}）

在页面中使用：<router-link to="路由路径" 或者v-on：to="{ name = '路由名'}">点击跳转的按钮</router-link>

<router-view/>路由表路径对应组件渲染的位置

动态路由：

同一组件仅信息不同（如图片，名称等不同）样式基本相同时

路由表：const routes:[ {path:'/：id',name:'',component:},{路径，路由名，显示组件} ]

组件：export default{ props：['id'] }<template><p>{{id}}</p></template>

页面使用：<router-link to="路由路径/id值" 或者v-on：to="{ name = '路由名'，params：{ id：值 }}">点击跳转的按钮</router-link>

嵌套路由：组件内有组件

路由表：const routes:[ {path:'/',name:'',component:, childern[ {path:'子路由名'，name："",component:,} ]},{路径，路由名，显示组件} ]

编程式导航

created(){ this.$router.push({ name:'home' }) query: { someData:'跳转前页面传递的数据'} }

使用数据：跳转后页面：created（）{ console.log( this.$route.query) }

route和router区别：route是路由信息对象，存放信息的。router是路由实例对象，存放多个实例。

导航守卫

全局前置：

router.beforeEach（（to，from，next））{ console.log('路由触发了') next（） }

to：跳转后页面，from：跳转前页面，next：next执行后才会完成跳转

全局后置：

router.afterEach((to, from) => {
  // 记录页面访问日志
  console.log(`从 ${from.name} 跳转到 ${to.name}`);
});

独享：

const routes = [
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard,
    beforeEnter: (to, from, next) => {
      // 检查用户权限
      const hasPermission = checkUserPermission();
      if (hasPermission) {
        next();
      } else {
        next({ name: 'Home' });
      }
    }
  }
];

组件内：

<script>
export default {
  name: 'Home',
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不能获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    next(vm => {
      // 通过 `vm` 访问组件实例
      console.log('即将进入 Home 组件');
    });
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    console.log('Home 组件路由更新');
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    const confirmLeave = confirm('确定要离开吗？');
    if (confirmLeave) {
      next();
    } else {
      next(false);
    }
  }
};

几个点：用confirm函数确认是否调用next（）进入组件

回调函数可实现beforeRouteEntery能够访问vm实例并修改属性

Vuex

配置store的inde.js

impo Vuex from 'vuex'

创造Vuex实例 Vue.use（Vuex）

导出：export default new Vuex.Store( { state:{ }, getters:{}, mutations:{ }，actions:{ }, modules:{ } } )

state：数据存储类似于data

return{ 定义属性名：值 }

（Vue中使用：全局this.$store.state.定义属性名）

mutations（同步）：改变state数据的方法

n方法（state,num）{ state.定义属性名 +=num }（Vue中使用：methods{ 定义的调用方法（）{ this.$store.commit('n方法'，传参num) } }）