精华内容
下载资源
问答
  • 看视频的时候发现vue3的一些基础配置代码有变,比如出使用createApp,app.use(),app.mount(’#app’)等,跟我现在的vue2 new Vue以及vue-router的方法上都有不同,我一直以为自己是vue3,本着追求新事物的想法,下午...

    之前的包版本

    看视频的时候发现vue3的一些基础配置代码有变,比如出使用createApp,app.use(),app.mount(’#app’)等,跟我现在的vue2 new Vue以及vue-router的方法上都有不同,我一直以为自己是vue3,本着追求新事物的想法,下午心血来潮把项目的vue和vue-router版本升级了一下,这是之前的package.json

     "dependencies": {
        "@tweenjs/tween.js": "^18.6.4",
        "axios": "^0.21.1",
        "dat.gui": "^0.7.7",
        "element-ui": "^2.4.5",
        "stats.js": "^0.17.0",
        "three": "^0.124.0",
        "three.meshline": "^1.3.0",
        "vue": "^2.6.11",
        "vue-router": "^3.2.0"
      },
      "devDependencies": {
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-plugin-eslint": "~4.5.0",
        "@vue/cli-plugin-router": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "babel-eslint": "^10.1.0",
        "babel-plugin-component": "^1.1.1",
        "core-js": "^3.8.3",
        "eslint": "^6.7.2",
        "eslint-plugin-vue": "^6.2.2",
        "less": "^4.0.0",
        "less-loader": "^7.2.0",
        "vue-cli-plugin-element": "^1.0.1",
        "vue-template-compiler": "^2.6.11"
      },
    

    注意一下vue,vue-router,element-ui 以及vue-template-compiler

    更新版本嘛,多简单

    vue来个3.0.0好了,vue-router来个4.0.0,保存package.json,npm install,走你~
    好嘛,遇到了不少问题,这些问题主要在于配置而不是vue3代码方法名的改变,因为我在看教学视频,所以代码里的方法我已经改好了,甚至超前了版本,比如我老早就写好了路由里的

    const router = createRouter({
      history: createWebHistory(process.env.BASE_URL),
      routes
    }) 
    

    但是那时还是vue2,找不到createWebHistory这个方法,所以坑主要在于配置上面;

    遇到的几个坑

    1. vue2才有vue-template-compiler,前面我贴的pakcage.json里的开发依赖里最后一个,vue3里不需要了,改成了@vue/compiler-sfc,不然可能会报TypeError: Cannot read property ‘parseComponent‘ of undefined的错;另外,还需要安装 vue-loader,可以尝试这两行命令
    npm i @vue/compiler-sfc@latest
    npm i vue-loader@next
    
    1. 再一个坑是element-ui的坑,到了vue3应该用element-plus,贴一个main.js里的全部引用方式,其实和element-ui一样,就是下载个新的包,代码里改下名字,不过如果是部分引用,改的就多一些了,这个自行谷歌吧
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    

    另外还有个问题,可能是element-plus的问题,之前页面是用element-ui写的,改了之后两个el-form-item里的两个按钮位置变了,好像是el-form-item加css的class没用,我的做法是在el-form-item下、也就是两个按钮的上面一层,加一层div,把class给div,就和原来一样了;在就是导航菜单出了问题,直接去官方文档看就可以;

    1. 最后报了一个让我To install it, you can run: npm install --save core-js/core/object的错,但是运行这个命令总是也不行,最后发现是代码里不小心加了一行,好像是import {object } from 'core-js/core/object',应该是自动补全的;
    2. 再就是为了保证three.js页面的性能,vue2里在beforeDestory里把this.XXX都清空了,换成vue3之后页面好卡,结果这个方法根本没执行,原来是vue3的生命周期里这个方法改名成beforeUnmount了,害;

    现在的package.json

    "dependencies": {
        "@tweenjs/tween.js": "^18.6.4",
        "axios": "^0.21.1",
        "dat.gui": "^0.7.7",
        "element-plus": "^1.0.2-beta.55",
        "element-ui": "^2.4.5",
        "stats.js": "^0.17.0",
        "three": "^0.124.0",
        "three.meshline": "^1.3.0",
        "vue": "^3.1.4",
        "vue-loader": "^16.2.0",
        "vue-router": "^4.0.10"
      },
      "devDependencies": {
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-plugin-eslint": "~4.5.0",
        "@vue/cli-plugin-router": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "@vue/compiler-sfc": "^3.1.4",
        "babel-eslint": "^10.1.0",
        "babel-plugin-component": "^1.1.1",
        "babel-plugin-import": "^1.13.3",
        "core-js": "^3.15.2",
        "eslint": "^6.7.2",
        "eslint-plugin-vue": "^6.2.2",
        "less": "^4.0.0",
        "less-loader": "^7.2.0",
        "vue-cli-plugin-element": "^1.0.1"
      },
    

    package.json前后git对比

    在这里插入图片描述

    展开全文
  • Vue-router的使用(vue3.0版本)

    千次阅读 2021-08-20 15:17:47
    vue-router 使用过程一级目录二级目录三级目录 一级目录 vue-router有三个概念 route, routes, router。 1, route,一条路由,它是单数,点击内容后跳转到指定内容,index按钮 => index内容, 这是一条route, ...

    一、Vue-router

    vue-router有三个概念 route, routes, router。

    1、route,一条路由,它是单数,点击内容后跳转到指定内容,home按钮 => home内容, 这是一条route, about按钮 => about 内容, 这是另一条路由。

    2、routes ,一组路由,所有路由组合形成的一个数组。
    [ {home 按钮 =>home内容 }, { about按钮 => about 内容} ]

    3、router 是一个机制,相当于一个管理者,来管理路由。
    routes 只是定义了一组路由,它放在那里是静止的,当请求来了,怎么办? 就是当用户点击home按钮的时候,怎么办?这时router会到routes 中去查找,去找到对应的 home内容,所以页面中就显示了 home内容。

    4、客户端中的路由,实际上就是dom 元素的显示和隐藏。当页面中显示home内容的时候,about 中的内容全部隐藏,反之也是一样。

    客户端路由有两种实现方式:基于hash 和基于html5 history api(可参考这篇文章:https://blog.csdn.net/qq_44827845/article/details/119819702?spm=1001.2014.3001.5501)

    二、Vue项目实现路由跳转

    1.Vue脚手架创建项目,安装对应模块

    1.vue create vue-routerDemo(必须有vue-cli)
    2.安装所有需要的模块
    

    在这里插入图片描述
    components:通用组件,比如分页
    views:组件,通常写事件,判断的内容

    2.最简单的Vue-router路由机制

    1.在components文件夹下新建两个vue文件:home.vue+about.vue

    <template>
        <div>
            <h1>home</h1>
            <p>{{msg}}</p>
        </div>
    </template>
    <script>
        export default {
            data () {
                return {
                    msg: "我是home 组件"
                }
            }
        }
    </script>
    
    <template>
        <div>
            <h1>about</h1>
            <p>{{aboutMsg}}</p>
        </div>
    </template>
    <script>
        export default {
            data () {
                return {
                    aboutMsg: '我是about组件'
                }
            }
        }
    </script>
    

    2.在 App.vue中 定义<router-link ></router-view>

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <header>
        <!-- router-link 定义点击后导航到哪个路径下 -->
          <router-link to="/home">Home</router-link>
          &nbsp;&nbsp;&nbsp;
          <router-link to="/about">About</router-link>
        </header>
        <!-- 对应的组件内容渲染到router-view中 -->
        <router-view></router-view>   
      </div>
    </template>
     
    <script>
    export default {
      
    }
    </script>
    

    3.在router文件夹下的定义router.js, 就是定义路径到组件的映射。

    import { createRouter, createWebHistory } from 'vue-router'
    // import VueRouter from "vue-router";
    // import Vue from "vue";
    import home from '../components/home.vue';
    import about from '../components/about.vue';
    
    // Vue.use(VueRouter);
    
    const routes = [
      {
        path: '/home',
        component: home
      },
      {
        path: '/about',
        component: about
      },
      // 重定向
      {
        path: '/', 
        redirect: '/home' 
      }
    ]
    
    const router = createRouter({
      history: createWebHistory(process.env.BASE_URL),
      routes
    })
    
    export default router;
    

    最开始因为我是采用最新的脚手架安装的是vue3.0,而很多文章使用的是vue2.0

    我运行之后爆错:

    Uncaught TypeError:Cannot read property ‘use‘ of undefined
    因为版本不对。
    它们的区别:vue3.0采用createRouter,不采用Vue.use(VueRouter)

    4.在main.js中引入路由,注入到根实例中。

    import { createApp } from 'vue'
    // import Vue from 'vue'
    import App from './App.vue'
    import router from './router/router'
    // import store from './store'
    
    createApp(App).use(router).mount('#app');
    
    // vue 2.0写法
    // new Vue({
    //   el: '#app',
    //   router,  // 注入到根实例中
    //   render: h => h(App)
    // })
    

    同样,版本区别:Vue 3 文档声明一个Vue实例使用的createApp()。

    5.结果
    在这里插入图片描述

    可以看到,router-link渲染为a标签,to渲染为href属性。

    同时,会发现选中 router-link 后,vueRouter 会自动添加 .router-link-active 这个类,那么我们可以利用这个类添加属性,改变颜色。
    在这里插入图片描述
    在这里插入图片描述

    3.动态路由

    3.1静态部分

    之前定义的两个路由,都是定义好的,是严格匹配的,只有router-link 中的to属性和 js 中一条路由route中 path 一模一样,才能显示相应的组件。
    但有时现实却不是这样的,当我们去访问网站并登录成功后,它会显示

    欢迎你,+ 你的名字。

    不同的用户登录, 只是显示“你的名字” 部分不同,其它部分是一样的。这就表示user组件,不同的用户(就是用户的id不同),它都会导航到同一个user 组件中。这样我们在配置路由的时候,就不能写死, 就是路由中的path属性,不能写死,那要怎么设置?

    都是导航到 user 组件,路径中肯定有user,只是用户的id 不同,那就给路径划分一个动态部分来匹配不同的id. 。在vue-router中,动态部分 以: 开头,那么路径就变成了/user/:id, 这条路由就可以这么写: { path:"/user/:id", component: user }

    1.定义一个user组件

    <template>
        <div>
            <h1>User</h1>
            <div>我是user组件</div>
        </div>
    </template>
    <script>
        export default {
        }
    </script>
    

    2.页面中再添加两个router-link 用于导航

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <header>
          <!-- router-link 定义点击后导航到哪个路径下 -->
          <router-link to="/home">Home</router-link>
          &nbsp;&nbsp;&nbsp;
          <router-link to="/about">About</router-link>
          <hr>
          <!--  增加两个到user组件的导航,可以看到这里使用了不同的to属性 -->
          <router-link to="/user/123">User123</router-link>&nbsp;&nbsp;&nbsp;
          <router-link to="/user/456">User456</router-link>
        </header>
        <!-- 对应的组件内容渲染到router-view中 -->
        <router-view></router-view>   
      </div>
    </template>
    <style>
      .router-link-active {
        color: red;
      }
    </style>
     
    <script>
    export default {
      
    }
    </script>
    

    3.最后router.js中添加路由配置

    import { createRouter, createWebHistory } from 'vue-router'
    // import VueRouter from "vue-router";
    // import Vue from "vue";
    import home from '../components/home.vue';
    import about from '../components/about.vue';
    import user from '../components/user.vue';
    
    // Vue.use(VueRouter);
    
    const routes = [
      {
        path: '/home',
        component: home
      },
      {
        path: '/about',
        component: about
      },
      // 重定向
      {
        path: '/', 
        redirect: '/home' 
      },
      /*新增user路径,配置了动态的id*/
      {
        path: "/user/:id",
        component: user
    },
    ]
    
    const router = createRouter({
      history: createWebHistory(process.env.BASE_URL),
      routes
    })
    
    export default router;
    

    在这里插入图片描述
    点击User13或者User456都是导航至user组件。

    3.2获取动态部分

    组件中要显示不同部分的内容,也就是“你的名字”。

    当整个vue-router 注入到根实例后,在组件的内部,可以通过this.$route 来获取到 router 实例。它有一个params 属性,就是来获得这个动态部分的。
    它是一个对象,属性名就是路径中定义的动态部分 id, 属性值就是router-link中to属性中的动态部分,如123。
    使用vuex时,组件中想要获取到state 中的状态,使用computed属性,在这里也是一样,在组件中,定义一个computed 属性dynamicSegment

    1.user 组件

    <template>
        <div>
            <h1>User</h1>
            <div>我是user组件, 动态部分是{{dynamicSegment}}</div>
        </div>
    </template>
    <script>
        export default {
            computed: {
                dynamicSegment () {
                    return this.$route.params.id
                }
            }
        }
    </script>
    

    在这里插入图片描述

    这里存在一个问题,就是动态路由在来回切换时,它们指向同一组件,user,vue不会销毁再创建这个组件,而是复用这个组件。

    当第一次点击(如:user123)的时候,vue 把对应的组件渲染出来,但在user123, user456点击来回切换的时候,这个组件就不会发生变化了。

    这时如果想要在组件来回切换的时候做点事情,那么只能在组件内部(user.vue中)利用watch 来监听$route的变化。

    user.vue组件

    <script>
        export default {
            data () {
                return {
                    dynamicSegment: ''
                }
            },
            watch: {
                $route (to,from){
                    // to表示的是你要去的那个组件,from 表示的是你从哪个组件过来的,它们是两个对象,你可以把它打印出来,它们也有一个param 属性
                    console.log(to);
                    console.log(from);
                    this.dynamicSegment = to.params.id
                }
            }
        }
    </script>
    

    在这里插入图片描述

    4.嵌套路由

    嵌套路由,主要是由我们的页面结构所决定的。当我们进入到home页面的时候,home页面下面还有分类,如手机系列,平板系列,电脑系列。当我们点击各个分类的时候,它需要路由到各个部分。如点击手机,它肯定到对应到手机的部分。

    1.home.vue 组件

    <template>
      <div>
        <h1>home</h1>
        <!-- <p>{{msg}}</p> -->
        <p>
          <router-link to="/home/phone">手机</router-link>&nbsp;&nbsp;&nbsp;
          <router-link to="/home/tablet">平板</router-link>&nbsp;&nbsp;&nbsp;
          <router-link to="/home/computer">电脑</router-link>
        </p>
        <router-view></router-view>
      </div>
    </template>
    <script>
    // export default {
    //     data () {
    //         return {
    //             msg: "我是home 组件"
    //         }
    //     }
    // }
    </script>
    

    2.router.js(不要忘记import引入)

    const routes = [
      {
        path: '/home',
        component: home,
        children: [
          {
            path: "phone",
            component: phone
          },
          {
            path: "tablet",
            component: tablet
          },
          {
            path: "computer",
            component: computer
          },
          // 当进入到home时,显示下面的组件
          {
            path: "",
            component: phone
          }
        ]
      },
      {
        path: '/about',
        component: about
      },
      // 重定向
      {
        path: '/',
        redirect: '/home'
      },
      /*新增user路径,配置了动态的id*/
      {
        path: "/user/:id",
        component: user
      },
    ]
    

    3.新建三个组件,例如:computer.vue

    <template>
        <div>
            <h1>computer</h1>
            <p>{{computerMsg}}</p>
        </div>
    </template>
    <script>
        export default {
            data () {
                return {
                    computerMsg: '我是home组件下的computer组件'
                }
            }
        }
    </script>
    

    在这里插入图片描述

    5.命名路由

    命名路由,很简单,看名字就知道,这个路由有一个名字,也就是路由有一个name属性。

    1.给user路由添加name属性

    {
    path: “/user/:id”,
    name: “user”,
    component: user
    }

    2.命名路由的使用

    <router-link to="/user/123">User123</router-link>
    // 和下面等价
    <router-link :to="{ name: 'user', params: { id: 123 }}">User123</router-link>
    // 当使用对象作为路由的时候,to前面要加一个冒号,表示绑定

    在这里插入图片描述

    编程式导航:这主要应用到按钮点击上。当点击按钮的时候,跳转另一个组件, 这只能用代码,调用rourter.push() 方法。 当们把router 注入到根实例中后,组件中通过 this.$router 可以获取到router, 所以在组件中使用。

    this.$router.push(’{name:“home”}’), 就可以跳转到home界面

    展开全文
  • 可以看到,这个 RouterVue 官方使用的路由,是和 Vue.js 核心深度集成。 我们之前也说过,我们以后是前后端分离式开发,分离后页面的跳转是交给前端本身去控制,而这个 Router 就是这一套控制的集成。 二、...

    一、什么是 Router

    打开 Vue Router 官网:https://next.router.vuejs.org/

    可以看到,这个 Router 是 Vue 官方使用的路由,是和 Vue.js 核心深度集成。

    我们之前也说过,我们以后是前后端分离式开发,分离后页面的跳转是交给前端本身去控制,而这个 Router 就是这一套控制的集成。

    二、安装

    我们想要使用这个 Router,首先要引入一下 Router。

    npm install vue-router@4

    当然,这个我们其实在创建项目的时候已经引入了这个 Router。来看一下

    并且 Vue 已经帮我们把这个 router 加载到全局了。所以这个安装是给没有安装 Router 的项目去使用的~~~

    三、配置文件讲解

    首先是 main.js

    我们在 main.js 中引入 router,然后使用 use() 方法将这个 router 注册到整个 Vue 实例中。

    然后是路由的配置文件 router/index.js

    首先看这两个 import,这个是引入我们的路由还有 App 这个页面。

    下面定义了一个 routers,注意,这个是一个数组,我们到时候会在这里配置好多个路由地址,这里我们只配置了一个非常简单的 App 页面(这也就是为啥我们启动项目后,就可以直接看到我们的 App.vue ~)

    然后是 router,这个里面我们使用了 history 的模式,这个接触过之前的 vue2 的项目的人可能知道,之前项目并不是这种 history,而是使用的 hash 模式。我们来看一下

    hash 模式

    history 模式

      

    前端路由的核心就是:改变视图的同时,不会向后端发出请求。

    为了达到这种目的,浏览器本身提供了两种支持,也就是我们上面看到的 hash 和 history,来看看这两种有啥不同

    hash —— 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。
    比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello。它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。

    history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)
    这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。

    这里 Vue 的建议是让我们使用 history 这种模式,具体为啥大家可以自己下去研究。

    四、使用

    我们这里先创建两个个页面

    页面有了,我们这里先来配置一下 router/index.js

    其实很简单,首先我们把两个页面引入进来,然后将这两个页面配置到和 App 同一级即可。

    接着我们去 App.vue 下。我们在这里写两个 router-link

    我们来看官网对 router-link 的介绍

    写完这个 router-link 还不够,我们还需要定义一个 router-view 

    这个 router-view 同样去看官网解释

    写完之后,我们从新启动项目

    五、测试

    可以看到,刚打开的时候你也许吓一大跳,为啥会有两个一模一样的 App.vue

    这里我要解释一下为啥会出现第二个 App.vue。原因是因为:<router-view></router-view>

    这里我们是请求的:/,路由拿到这个请求之后,会根据我们配置的 router/index.js 去寻找我们的请求地址所对应的页面,很明显,我们配置的根请求就是 App.vue

    所以呢,我们的 router-view 就会将整个 App.vue 再次加载出来,所以除去本身,我们还有一个是路由帮我们加载的。(我们下面会去说这个怎么去解决)

    我们先来点击一下上面的 router-link。

    可以看到啊,这个是 OK 的。

    六、router 配置默认页面

    接着我们来说一下我们上面的那个问题。

    这里我们可以将 / 根请求做一次重定向,直接重定向到 /hello-router1,这样的话,我们就不会出现第二次加载 App.vue 了。

    我们使用 redirect 直接进行重定向即可,然后保存,我们再来请求 http://localhost:8080

    ok 的啊

    最后,再来说一个问题,我们上面配置了根请求,然后做了重定向,那么我们第一次加载页面的时候是怎么加载的,按道理来说不会出现才对。

    这里解释一下,我们第一次加载页面靠的不是这个路由,而是我们 main.js 中的挂载配置。来看一下

    即使我们在路由中将 App 的那段路由代码删除了,同样也是可以访问的。可以自己去尝试一下~~~

    这一篇东西有点多,自己动手练习一下~~

    有问题可以联系我:QQ 2100363119,欢迎大家访问我的个人网站:https://www.lemon1234.com

    最近网站已经做好,并且已经上线,欢迎各位留言~~~

    展开全文
  • R语言的一些笔记(1)包中函数必须在NAMESPACE中进行标记导出,否则就不认识了: 例如叫做rtest.Model.LogisticreRression 就能识别,而叫做Model.LogisticreRress ...怎样改动SVN的地址改动svn地址的目的有两个,一个是...

    R语言的一些笔记

    (1)包中函数必须在NAMESPACE中进行标记导出,否则就不认识了: 例如叫做rtest.Model.LogisticreRression 就能识别,而叫做Model.LogisticreRress ...

    怎样改动SVN的地址

    改动svn地址的目的有两个,一个是更改默认svn路径.还有一个就是svn库server迁移了. 我碰到的是另外一种情况,SVN的IP地址改了,须要这么切换: 在本地配置库副本根文件夹点击鼠标右键--& ...

    NOIP2014-提高组初赛C语言解析(选择填空题)

    第二十届全国青少年信息学奥林匹克联赛初赛 一.单项选择题(共 20 题,每题 1.5 分,共计 30 分.每题有且仅有一个正确选项) 1. 以下哪个是面向对象的高级语言( B ) A.汇编语言   B ...

    经典51道SQL查询练习题

    数据表介绍 --1.学生表 Student(SId,Sname,Sage,Ssex) --SId 学生编号,Sname 学生姓名,Sage 出生年月,Ssex 学生性别 --2.课程表 Course( ...

    linux驱动调试记录

    linux驱动调试 linux 目录 /proc 下面可以配置驱动的调试信息,比如给proc目录的自己定制的驱动的一文件设置一个变量,然后驱动程序跟了proc的参数值来配置调试级别.类似于内核调试的级 ...

    python操作三大主流数据库&lpar;12&rpar;python操作redis的api框架redis-py简单使用

    python操作三大主流数据库(12)python操作redis的api框架redis-py简单使用 redispy安装安装及简单使用:https://github.com/andymccurdy/r ...

    python---redis的python使用

    set以及相关: r.set("foo","bar") print(r.get("foo"))#b'bar' #在Redis中设置值,默认, ...

    VS2017编译boost库

    1.http://www.boost.org/     下载boost库. 2.解压到 D:\ProgramFiles\boost 3.环境配变量配置     VS2017更加注重跨平台性,安装文件较 ...

    Halcon 1D测量

    1.产生测量句柄,准备提取与矩形(圆弧)主轴垂直的值边缘. gen_measure_rectangle2或gen_measure_arc 2.测量边缘对   ,测量的直线与矩形或者圆弧垂直 measu ...

    2017第十三届湖南省省赛B - Simplified Blackjack CSU - 1998

    在一次聚会上,Bob打算和Alice一起玩Blackjack游戏,但Alice平时很少玩扑克类游戏,Bob觉得跟Alice解释清楚Blackjack的规则有点困难,于是Bob决定和Alice玩一次简化 ...

    展开全文
  • 使用vue-router,这里特别说明一下,我这里记录的是vue-router文件的编写。及在页面中的使用。 我的站点主要分为三个部分: 1:pc端页面的路由 2:手机端页面的路由 3:后端管理系统的路由 因此,我这里会使用到路由...
  • vue-router详解

    2020-12-31 04:55:43
    写在开头官网的vue-router文档写的很好,但是结构是扩散性的,主要是理论的讲解,想要边看边写一个例子对于初学者来说还是有一定难度,我这里主要是从例子出发,把理论贯穿到实例当中。一、基础知识介绍1、前端路由...
  • vue项目——Vue Router路由的使用

    千次阅读 2020-12-20 19:06:34
    前言:学习vue也有一段时间了,这里把学习整个vue项目中...一、Vue RouterVue RouterVue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。我简单理解就是我们在有的页面中看到...
  • 参考:源码:vuejs/vue-router v2.2.1 - github文档vue-router 官方中文教程参考博客 :http://cnodejs.org/topic/58d680c903d476b42d34c72bVueRouter包括三个主要组成部分 ——VueRouterrouter-view和router-...
  • Vue3 + Vue Router4.x 一、初始化Vue3项目二、setup函数1、setup使用2、setup中的渲染函数 (h)/JSX方法3、setup中的参数3.1 **props对象**3.2 **`context` 上下文**三、响应式API1、 响应性基础 APIs1.1 `reactive...
  • vue 3.0 创建router

    2021-02-02 14:27:29
    import { createRouter, createWebHistory } from 'vue-router' import home from '../views/home/home.vue' const routes = [ { path: '/', name: 'home', component: home }, { path: '/test', name: '...
  • Vue Router 使用方法

    2021-06-23 03:38:29
    import Vue from 'vue'import VueRouter from'vue-router'Vue.use(VueRouter)如果使用全局的 script 标签,则无须如此 (手动安装)。构建开发版本如果你想使用最新的开发版,就得从 GitHub 上直接 clone,然后自己 ...
  • vue-router使用详解

    2021-07-19 15:54:03
    yarn add vue-router 使用 HTML: // App.vue <script src="https://unpkg.com/vue@3"></script> <script src="https://unpkg.com/vue-router@4"></script> <div id="app"> <h1...
  • 其中最重要的一个概念就是前端路由,那么接下来就做一个简单的介绍和分析: vue-router 介绍 vue-routerVue.js官方提供的路由插件,专门配合vue实现路由跳转功能,需要使用Vue.use()进行安装。区别于传统的通过...
  • vue3.0 + vue-router4.0打包后页面空白

    千次阅读 2021-03-17 10:06:59
    这种错误是因为vue.config.js的配置里面 publicPath写了绝对路径,生产环境改为./相对路径即可,vue.config.js详细配置参考官方文档 第二种错误:无报错,js加载了,但是页面空白(router-view没有渲染任何内容) ...
  • vue3 + vue-router4 入门级管理后台

    千次阅读 2021-01-27 10:45:03
    vue-cli:Migrating from v3 | Vue CLI vueVue3js(中文文档Vue3中文文档 - vuejs) vue-router:Home | Vue Router vuex:Vuex 是什么? | Vuex 正文 基础配置项目中都已经写了,大家如果有疑问或者不适合的...
  • vue3.0配置vue-router

    千次阅读 2021-03-07 11:10:18
    第二步:我们去package.json去看一下,如果vue-router是4.0.0以上的就是支持vue3的 文档>> 第三步:向应用中添加vue-router的实例 1、打开main.ts 引入vue-router import { createApp } from 'vue' ...
  • 文章目录 前言 使用Vue CLI UI创建项目 router-link和router-view 创建路由 懒加载路由/按需加载 webpackChunkName Vue Router Active Class named routes/命名路由 动态路由:params/参数 访问路由参数 路由参数...
  • 近期在学习vue中发现官方文档中如何添加路由写的太模糊了,很难理解,然后各种找资料各种度娘才弄明白,所以这里做个笔记方便自己查询。 第一步安装路由vue-router 这里只考虑npm安装 npm install vue-router 第二...
  • Vue-Router-路由重定向

    2021-04-24 19:37:37
    router/dist/vue-router.js">script> <title>Vue-Routertitle> head> <body> <div id="box"> <p> <router-link to="/home">homerouter-link> <router-link to="/news">newsrouter-link> p> <router-view>router-view...
  • Vue-Router内部原理

    2021-01-11 23:55:01
    如果不在浏览器环境则使用abstract(node环境下) //Vue-router源码 switch (mode) { case 'history': this.history = new HTML5History(this, options.base) break case 'hash': this.history = new HashHistory...
  • vue router函数

    2020-12-20 15:51:43
    vue的实例里面我们可以使用this.$router来调用router功能 router.push 可以使用push方法 // 字符串 router.push('home') // 对象 router.push({ path: 'home' }) // 命名的路由 router.push({ name: 'user', ...
  • vue3.x+ts+router

    2021-12-04 17:00:16
    首先看官方文档新建一个项目 # npm 6.x $ npm init vite@latest <project-name> --template vue # npm 7+,需要加上额外的双短横线 $ npm init vite@latest <project-name> -- --template vue $ cd ...
  • 项目背景 目前的项目是基于若依框架的前后不分离的项目开发的后台管理项目,在此基础上进行迭代开发。 尝试:目前按钮权限是采用<...的方式进行权限控制的,直接...看了一下若依的文档,然后新的页面的是在vuevue-ro
  • vite 集成 vue-router 和 vuex

    千次阅读 2020-12-24 08:37:16
    vue-router 参考:https://next.router.vuejs.org/installation.html https://blog.csdn.net/weixin_43932067/article/details/110374163 安装vue-router npm install vue-router@next 然后我们新建一个router.js...
  • 本人在学习Vue的过程中,使用的是最新的脚手架,这里主要分享一下如何main.js以及router.js的配置 查看Vue-Cli的版本: 自从Cli的版本升级之后,ElementUI也推出了对应的插件——ElementUI-Plus. 大家可以直接去...
  • vue文档

    2020-12-22 08:41:12
    vue 的读音 viewvue到底是什么?一个mvvm框架vue和angular的区别:vue:简单容易上手 指令以v-开头 个人维护的项目 比较小巧适合移动端的项目angular:指令以ng-开头 由谷歌维护 所有属性和方法都挂在$scope身上 ...
  • 一、说明 权限管理一般从路由权限、接口权限、页面权限、按钮权限四个角度去考虑。 我基于业务需求,实现了路由权限、页面权限、按钮权限。...import { createRouter, createWebHashHistory } from "vue-router"; impo
  • Vite搭建 Vue 3.x + Vue Router + Vuex + TypeScript 项目 1. 检查Node版本 # 查看当前已安装的node版本(Vite 需要 Node.js 版本 >= 12.0.0) $ node -v 2. 使用Vite 创建项目 使用命令行工具, 在待创建项目的...
  • vue3 中 watch 监控当前 router 需求:在开发过程中,router 匹配当前导航栏,并将指定导航栏进行高亮显示。 主要问题:实时获取当前路由数据,实时更新数据 selectedKeys 解决方案:使用vue3中的 useRouter 进行...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,642
精华内容 9,856
关键字:

router中文文档vue

vue 订阅