博客

router-view


作为vue最核心的路由管理组件，在项目中作为路由管理经常被使用到。vue项目最核心的App.vue文件中即是通过router-view进行路由管理。

我们在自己维护项目的时候，也可以使用router-view组件进行路由管理，对于页面局部刷新的场景，该组件能发挥关键作用；

2.创建项目时候如果忘记加入vuex等 安装后还需要在main.js里面导入

3.创建实例变成了链式, 直接写下去感觉语义与结构有点模糊, 但是我们要理解vue这样做的良苦用心, 前端趋近于函数化.

createApp(App).use(router).use(store).mount('#app')


const router = createRouter({
// 专门创建history的函数
  history: createWebHistory(process.env.BASE_URL),
  routes
})

4.变量定义

方法1:

import { ref } from "vue";
export default {
  // 1: 这个版本基本逻辑都在setup里面完成了, 把他当成2.x的data.
  setup() {
    // 2: 定义一个追踪的变量,也就是双向绑定.
    const n = ref(1); // 生成的n是一个对象, 这样方便vue去监控它
    function addN() {
      n.value++; // 注意这里要使用.value的形式, 因为n是对象↑, value才是他的值
    }
    return {
      n,   // 返回出去页面的template才可以使用它, {{n}} 不需要.value
      addN
    }
  }
 }

方法二：

import { reactive, toRefs } from "vue";
export default {
  setup() {
    // 注意事项: reactive的对象不可以结构返回或导入, 会导致失去响应式
    const obj = reactive({
      name: "金毛",
      age: 4
    });
    function addObj() {
      obj.age++;
    }
    return {
      ...obj, // 这样写不好, 里面会失去响应式
      obj, // 这样写那么外面就要都基于obj来调取, 类型{{obj.age}}
      ...toRefs(obj) // 必须是reactive生成的对象, 普通对象不可以, 他把每一项都拿出来包了一下, 我们可以这样用了 {{age}}, 多深的obj都可以响应
    }
  }
 }

思否-一次vue3组分享会

5.路由传参

params传参，push里面只能是 name:‘xxxx’,不能是path:‘/xxx’,因为params只能用name来引入路由

uery相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示

$router为VueRouter实例

$route为当前router跳转对象

6.

vue视图不更新方法