精华内容
下载资源
问答
  • 2020-04-30 12:43:33

    一、通过路由params传值

        路由传值有两种方式,params和query,params传值刷新页面是要消失的,然而query却不会,两者的区别就在于query会把传递的参数显示在url地址中,就像这样:/adminUser/001001001?jum=001001001211,参数过多的话url地址会变得非常难看,如果你并不在意url地址难看与否,那么你可以不使用params,而是使用query,只是切换个单词而已,这是一种方法(不是最优办法)。

    补充:如果想传入多个参数写法如下:

     path: '/adminCun/:jum/:id/:type
        还有一种方法,就是在定义路由的时候,给path设定参数,举个例子,一看就懂

    export default [{
      path: '/platform',
      component: Layout2,
      children: [{
        path: '/adminCun/:jum',        //这里值用:加参数的写法,jum即为参数,注意一定要用/隔开(多参数传递如上代码↑)
        name:'platformRecycleAdminCun',
        meta:{
          title:'管辖村级详情'
        },
        component: resolve => require(['@/view/platform/recycle/admincun'],resolve)
      }]
    }]

    二、还有一种就是使用vuex

        页面刷新store.state中的数据消失是不可避免的,那么使用localStorage来避免这个问题。发现问题的时候我就考虑到存数据在localStorage里,但是一个一个数据添加实在是太蠢了。那么就需要一个全局的方法来,将store的数据存储在localStorage里。具体的方法也是百度的很好用,也很方便。

        在App.vue中,created初始化生命周期中写入以下方法

     
    //在页面刷新时将vuex里的信息保存到localStorage里
    window.addEventListener("beforeunload",()=>{
      localStorage.setItem("messageStore",JSON.stringify(this.$store.state))
    })
     
    //在页面加载时读取localStorage里的状态信息
    localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("messageStore"))));
    replaceState这个方法呢,查了api,就是替换 store 的根状态,然后通过对象赋值assign将localStorage进行赋值

    beforeunload这个方法是在页面刷新时触发的,将store中的信息存入localStorage

    这样就通过localStorage来避免vuex刷新数据消失的问题了。

     

    以上是路由传参和vuex存值、传值的时候刷新页面数据消失的解决办法。

     

    更多相关内容
  • 一、Vue路由基础用法: 1 .安装 npm install vue-router --save 2 .main.js中 //Vue路由:引入 import VueRouter from 'vue-router' Vue.use(VueRouter) //Vue路由:引入并创建组件 import BYHome from './...

    一、Vue路由基础用法:

    1 .安装
     npm install vue-router --save
    2 .main.js中
    //Vue路由:引入
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
    
    //Vue路由:引入并创建组件
    import BYHome from './components/BYHome.vue'
    import BYNews from './components/BYNews.vue'
    import HelloWorld from './components/HelloWorld.vue'
    
    //Vue路由:配置路由
    const routes = [
      {path: '/home', component: BYHome},
      {path: '/news', component: BYNews},
      {path: '/helloworld', component: HelloWorld},
      {path: '*', redirect: '/home'} /*默认跳转路由 */
    ]
    
    //Vue路由:实例化VueRouter 
    const router = new VueRouter({
      routes //缩写,相当于 routes:routes
    })
    
    new Vue({
      router, //Vue路由:挂载路由
      render: h => h(App),
    }).$mount('#app')
    
    //Vue路由:根组件的模板里面放上下面这句话,需要在App.vue 中配置路由出口:路由匹配到的组件将渲染在根组件App.vue中
    <router-view></router-view>
    
    //路由跳转
    <router-link to="/home">首页</router-link>  
    <router-link to="/news">新闻</router-link>
    <router-link to="/helloworld">helloWorld</router-link>
    

    二、Vue路由配置的抽出

    1.安装

      npm install vue-router --save
    

    2.创建router.js文件,在该文件中配置路由并暴露出去

     import Vue from 'vue';
      //Vue路由:引入
        import VueRouter from 'vue-router'
        Vue.use(VueRouter)
    
        //Vue路由:引入并创建组件
        import BYHome from '../BYHome.vue'
        import BYNews from '../BYNews.vue'
        import HelloWorld from '../HelloWorld.vue'
    
        //Vue路由:配置路由
        const routes = [
          {path: '/home', component: BYHome},
          {path: '/news', component: BYNews},
          {path: '/helloworld', component: HelloWorld},
          {path: '*', redirect: '/home'} /*默认跳转路由 */
        ]
    
        //Vue路由:实例化VueRouter 
        const router = new VueRouter({
          routes //缩写,相当于 routes:routes
        })
        //Vue路由:需要在App.vue 中配置路由出口:路由匹配到的组件将渲染在根组件App.vue中
        /* <router-view></router-view> */
    
    
        //暴露出去
        export default router;
    

    3.在main.js中

    //Vue路由:引入路由文件
    import router from ‘./components/jsTool/router.js’

    new Vue({undefined
    router, //Vue路由:挂载路由
    render: h => h(App),
    }).$mount(’#app’)

    4.Vue路由:根组件的模板里面放上下面这句话,需要在App.vue 中配置路由出口:路由匹配到的组件将渲染在根组件App.vue中

       <router-view></router-view>
    

    5.路由跳转

    <router-link to="/home">首页</router-link>  
    <router-link to="/news">新闻</router-link>
      <router-link to="/helloworld">helloWorld</router-link>
    

    三、路由动态传值:

    1.获取路由的get传值

    //路由配置

    import BYHomeDetail from '../BYHomeDetail.vue'
    {path: '/homeDetail', component:BYHomeDetail},
    //跳转时跟get参数
    <li li v-for="(listItem,homeKey) in msglist">
                <router-link :to="'/homeDetail?id='+homeKey"> {{listItem.title}} </router-link>
     </li>
     //子页面获取路由的get传值
      mounted(){
        console.log(this.$route.query);
    }
    

    2.动态路由传值

    //路由配置:带形参
    import BYNewDetail from '../BYNewDetail.vue'
    {path: '/newDetail/:aid', component: BYNewDetail}, 
    //跳转时传值
    <li v-for="(item,key) in list">
        <!-- 给 newDetail 传值 -->
        <router-link :to="'/newDetail/'+key">{{key}}--{{item}}</router-link>
    </li>
    //子页面获取动态路由传值
     mounted(){
        console.log(this.$route.params);
    }
    

    四、路由的跳转方式:

    第一种跳转方式:编程式导航

    {path: '/news', component: BYNews},
    this.$router.push({path:'news'});
    带参:
    {path: '/newDetail/:aid', component: BYNewDetail},
    this.$router.push({path:'/newDetail/495'});
    

    第二种跳转方式:命名路由

     {path: '/news', component: BYNews,name:'news'},
        this.$router.push({name:'news'});
        带参:
        this.$router.push({name:'news',params:{userId:123}});
    

    五、路由的hash模式以及history模式:

    默认是hash模式,路由上方的路径是用#表示,http://localhost:8080/#/news

    可以将hash模式改为history模式,路由上方的路径就没有了

    #,http://localhost:8080/news 
      如果有history模式,需要后台做一些配置
      //Vue路由:实例化VueRouter 
    const router = new VueRouter({
      mode: 'history',   //若是默认的hash模式,则mode不需要写
      routes //缩写,相当于 routes:routes
    })
    

    六、路由的嵌套

    User.vue页面中有两个子页面
    UserAdd.vue
    UserList.vue

    //路由的配置
    import BYUser from '../BYUser.vue'
      import UserAdd from '../User/UserAdd.vue'
      import UserList from '../User/UserList.vue'
    
    {path: '/user' , component:BYUser,
        children:[
          {path: 'useradd',component:UserAdd},
          {path: 'userlist',component:UserList}
        ]
    },
    
    //路由的跳转
    <div>
        <div class="left">
            <ul>
                <li>
                    <router-link to="/user/useradd"> 增加用户 </router-link>
                </li>
                <li>
                     <router-link to="/user/userlist"> 用户列表 </router-link>
                </li>
            </ul>
        </div>
        <div class="right">
            <router-view></router-view>
        </div>
    </div>
    

    七、登录及首页的路由配置说明
    1.创建一个localstorage本地存储类storage.js,用来记录登录状态

    var storage={
        set(key,value){
            console.log("storage---->")
            console.log(value)
            localStorage.setItem(key, JSON.stringify(value));
        },
        get(key){
            return JSON.parse(localStorage.getItem(key));
        },remove(key){
            localStorage.removeItem(key);
        }
    }
    export default storage;
    

    2.创建一个自定义的路由表:router.js

    import Vue from 'vue';
    //引入路由
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
    
    //设置路由表
    const routes = [
     {
       path: '/',
       redirect: '/home'
     },
     {path: '/404', component: resolve => require(['../common/404.vue'],resolve)},
     {path: '/login', component: resolve => require(['../page/Login.vue'],resolve)},
     {path: '/home',component: resolve => require(['../page/Home.vue'],resolve),meta:{requireAuth:true}},//加上meta 表示需要登录才可进入
     {
       path:'*',
       redirect:'/404'
     }
    ]
    //实例化路由并指定模式
    const router = new VueRouter({
     /*默认是hash模式,路由上方的路径是用#表示,http://localhost:8080/#/news
     可以将hash模式改为history模式,路由上方的路径就没有了#,http://localhost:8080/news 
       如果有history模式,需要后台做一些配置
     */
       // mode:'history',
       routes //缩写,相当于 routes:routes
    })
    //暴露出去,供外部调用
    export default router;
    

    3.在main.js中配置钩子路由:

    //引入自定义的路由表
    import router from './components/router/router.js'
    //引入localstorage本地存储管理
    import storage from "./components/Tools/storage.js";
    /**在路由跳转之前执行
     * to: 即将进入的路由对象
     * from: 当前导航即将离开的路由
     * next:Function,进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed (确认的);否则为false,终止导航。
     *  */
    router.beforeEach((to, from, next) => { 
      //需要登录,但未登录者可以跳转到登录页面
      const isLogin = storage.get('login');
      if(!isLogin && to.meta.requireAuth){//未登录 且 需要登录(提前在路由表中加上meta)
        next({
          path:'/login'
        })
      }else{//其他
        next();
      }
    });
    

    4.登录及退出登录

        
    登录:
        console.log("登录成功");
        let flag = true;
        storage.set('login',flag);//存储登录状态
        this.$router.push('/');//按路由规则跳转
    退出登录:
        console.log("退出登录");
        let flag = false;
        storage.set('login',flag);//存储登录状态
        this.$router.push('/login');//按路由规则跳转
                
    

    vue-Router实现原理

    一、前端路由概念
    通过改变 URL,在不重新请求页面的情况下,更新页面视图。

    二、vue-Router两种模式
    更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式:

    Hash — 默认值,利用 URL 中的hash("#") 、

    history-- 利用URL中的路径(/home)

    如何设置路由模式
     

    const router=new VueRouter({
        mode:'history',
        routes:[...]
    })
    

    mode 区别:

    1. mode:“hash” 多了 “#”
    http://localhost:8080/#/login
    
    1. mode:“history”
      http://localhost:8080/home
      

      三、HashHistory
      hash("#")的作用是加载 URL 中指示网页中的位置。# 号后面的 hash值,可通过 window.location.hash 获取

      特点:

      hash 不会被包括在 http 请求中,,对服务器端完全无用,因此,改变 hash 不会重新加载页面。

      可以为 hash 的改变添加监听事件:window.addEventListener("hashchange",funcRef,false)

      每一次改变 hash(window.localtion.hash),都会在浏览器访问历史中增加一个记录。

      利用 hash 的以上特点,就可以来实现前端路由"更新视图但不重新请求页面"的功能了。

      HashHistory 拥有两个方法,一个是 push, 一个是 replace

      两个方法:HashHistory.push() 和 HashHistory.replace()
      1
      HashHistory.push() 将新路由添加到浏览器访问历史的栈顶

      在这里插入图片描述


      从设置路由改变到视图更新的流程:

      $router.push() --> HashHistory.push() -->History.transitionTo() --> History.updateRoute() --> {app._route = route} --> vm.render()

      解释:

      $router.push() //调用方法
      HashHistory.push()//根据hash模式调用,设置hash并添加到浏览器历史记录(添加到栈顶)(window.location.hash= XXX)
      History.transitionTo() //监测更新,更新则调用History.updateRoute()
      History.updateRoute() //更新路由
      {app._route= route} //替换当前app路由
      vm.render() //更新视图

      HashHistory.replace()

      replace()方法与push()方法不同之处在于,它并不是将新路由添加到浏览器访问历史的栈顶,而是替换掉当前的路由

      在这里插入图片描述

       

      四、HTML5History
      早期History通过back()、forward()、go()等方法,我们可以读取浏览器历史记录栈的信息
      从HTML5开始History提供了2个新的方法:pushState()、replaceState()
      使得我们可以对浏览器历史记录栈进行修改:

      window.history.pushState(data, title, targetURL);
      @状态对象:传给目标路由的信息,可为空
      @页面标题:目前所有浏览器都不支持,填空字符串即可
      @可选url:目标url,不会检查url是否存在,且不能跨域。如不传该项,即给当前url添加data
      1
      2
      3
      4
      window.history.replaceState(data, title, targetURL);
      @类似于pushState,但是会直接替换掉当前url,而不会在history中留下记录
      1
      2
      假定当前网址是example.com/1.html,使用pushState()方法在浏览记录(History 对象)中添加一个新记录。

      var stateObj = { foo: 'bar' };
      history.pushState(stateObj, 'page 2', '2.html');
      1
      2
      添加新记录后,浏览器地址栏立刻显示example.com/2.html,但并不会跳转到2.html,甚至也不会检查2.html是否存在,它只是成为浏览历史中的最新记录。

      这2个方法有个共同的特点:当调用他们修改浏览器历史栈后,虽然当前url改变了,但浏览器不会立即发送请求该url,这就为单页应用前端路由,更新视图但不重新请求页面提供了基础

      更多操作:
       

      history.pushState({page: 1}, 'title 1', '?page=1')
      // URL 显示为 http://example.com/example.html?page=1
      
      history.pushState({page: 2}, 'title 2', '?page=2');
      // URL 显示为 http://example.com/example.html?page=2
      
      history.replaceState({page: 3}, 'title 3', '?page=3');
      // URL 显示为 http://example.com/example.html?page=3
      
      history.back()
      // URL 显示为 http://example.com/example.html?page=1
      
      history.back()
      // URL 显示为 http://example.com/example.html
      
      history.go(2)
      // URL 显示为 http://example.com/example.html?page=3
      
      

      监听地址变化

      在HTML5History的构造函数中监听popState(window.onpopstate)

      popstate事件会在点击后退、前进按钮(或调用history.back()、history.forward()、history.go()方法)时触发。前提是不能真的发生了页面跳转,而是在由history.pushState()或者history.replaceState()形成的历史节点中前进后退
      注意:用history.pushState()或者history.replaceState()不会触发popstate事件。
       

      window.onpopstate = function(event) {
        console.log(event.state);
        console.log(window.history.state;);
      };
      

      以上两种方式皆可获取之前在pushState和replaceState中传入的data

      注意,页面第一次加载的时候,浏览器不会触发popstate事件。

      五、两种模式比较
      pushState设置的新URL可以是与当前URL同源的任意URL;而hash只可修改#后面的部分,故只可设置与当前同文档的URL

      pushState通过stateObject可以添加任意类型的数据到记录中;而hash只可添加短字符串

      pushState可额外设置title属性供后续使用

      history模式则会将URL修改得就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理,则会返回404错误

    2. <!DOCTYPE html>
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <title>pushState</title>
          <style type="text/css">
          .hidden {
              display: none;
          }
          </style>
      <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
      </head>
      
      <body>
          <section id="step1" class="step-contain" step="1">
              <p>第1步</p>
              <button class="step-btn" step="1">下一步</button>
          </section>
          <section id="step2" class="step-contain hidden" step="2">
              <p>第2步</p>
              <button class="step-btn" step="2">下一步</button>
          </section>
          <section id="step3" class="step-contain hidden" step="3">
              <p>第3步</p>
          </section>
          <script type="text/javascript">
          $(function() {
              stepProgress();
      
              function stepProgress() {
                  var options = {
                      curStep: 1,
                      nextStep: null
                  }
                  var defaultState={
                      "step": options.curStep,
                       "url": "#step=" + options.curStep
                  }
                  window.history.pushState(defaultState, "", defaultState.url);
                  $(".step-btn").on("click", function() {
                      var step = parseInt($(this).attr("step"));
                      options.nextStep = step + 1;
                      var state = {
                          "step": options.nextStep,
                          "url": "#step=" + options.nextStep
                      }
                      window.history.pushState(state, "", state.url);
                      console.log(state.step)
                      swapStaus(options.nextStep);
                  });
      
                  function swapStaus(step) {
                      $(".step-contain").each(function() {
                          var tmpStep = $(this).attr("step");
                          if (parseInt(tmpStep) == step) {
                              $("#step" + tmpStep).removeClass("hidden");
                          } else {
                              $("#step" + tmpStep).addClass("hidden");
                          }
                      });
                      options.curStep = step;
                  }
      
                  $(window).on("popstate",function(){
                      var currentState = history.state;
                      goStep=currentState.step?currentState.step:1;
                      swapStaus(goStep)
                  })
              }
      
          })
          </script>
      </body>
      
      </html>
      

      代码:
       

    展开全文
  • Vue路由导航

    2022-01-12 16:41:25
    一、要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用标签编写链接哪?vue-router如何使用?常见路由操作有哪些?等等这些问题,就是本篇要探讨的主要问题 二、vue-router是什么 这里...

    一、要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用标签编写链接哪?vue-router如何使用?常见路由操作有哪些?等等这些问题,就是本篇要探讨的主要问题

    二、vue-router是什么

    • 这里的路由并不是指我们平时所说的硬件路由器,这里的路由就是SPA(单页应用)的路径管理器。再通俗的说,vue-router就是WebApp的链接路径管理系统。
    • vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。
    • 至于我们为啥不能用a标签,这是因为用Vue做的都是单页应用,就相当于只有一个主的index.html页面,所以你写的a标签是不起作用的,你必须使用vue-router来进行管理。
    • 这里解释一下什么是SPA(单页应用)德路径管理器:SPA(single page application):单一页面应用程序,只有一个完整的页面;它在加载页面时,不会加载整个页面,而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面。

    三、vue-router实现原理

    • vue-router在实现单页面前端路由时,提供了两种方式:Hash模式和History模式;根据mode参数来决定采用哪一种方式。

    1、Hash模式:

    • vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。 hash(#)是URL 的锚点,代表的是网页中的一个位置,单单改变#后的部分,浏览器只会滚动到相应位置,不会重新加载网页,也就是说 #是用来指导浏览器动作的,对服务器端完全无用,HTTP请求中也不会不包括#;同时每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用”后退”按钮,就可以回到上一个位置;所以说Hash模式通过锚点值的改变,根据不同的值,渲染指定DOM位置的不同数据
    • (简单来说就是:Hash即地址栏URL中的 # 符号 hash虽然出现在URL中,但不会被包括在HTTP请求中,对后端完全没有影响,因此改变hash不会重新加载页面。)

    2、History模式:

    • 由于hash模式会在url中自带#,如果不想要很丑的 hash,我们可以用路由的 history 模式,只需要在配置路由规则时,加入"mode: ‘history’",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
    //main.js文件中
    const router = new VueRouter({
     mode: 'history',
     routes: [...]
    
    • 当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,比较好看!
    • 不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。
    • 所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。
     export const routes = [ 
      {path: "/", name: "homeLink", component:Home}
      {path: "/register", name: "registerLink", component: Register},
      {path: "/login", name: "loginLink", component: Login},
      {path: "*", redirect: "/"}]
    

    此处就设置如果URL输入错误或者是URL 匹配不到任何静态资源,就自动跳到到Home页面

    • 简单来说就是: 我们经常使用的是History模式 前端的URL必须和实际向后端发起请求的URL一致 如果后端缺少对路由处理,将返回404错误

    3、使用路由模块来实现页面跳转的方式

    方式1:直接修改地址栏

    方式2:this.$router.push(‘路由地址’)

    方式3:<router-link to="路由地址"></router-link>

    四、vue-router使用方式

    1、下载 npm i vue-router -S
    2、在main.js中引入 import VueRouter from ‘vue-router’;
    3、安装插件 Vue.use(VueRouter);
    4、创建路由对象并配置路由规则

    let router = new VueRouter({routes:[{path:’/home’,component:Home}]});

    5、将其路由对象传递给Vue的实例,options中加入 router:router
    6、在app.vue中留坑

    具体实现请看如下代码:

    //main.js文件中引入
    import Vue from 'vue';
    import VueRouter from 'vue-router';
    //主体
    import App from './components/app.vue';
    import Home from './components/home.vue'
    //安装插件
    Vue.use(VueRouter); //挂载属性
    //创建路由对象并配置路由规则
    let router = new VueRouter({
        routes: [
            //一个个对象
            { path: '/home', component: Home }
        ]
    });
    //new Vue 启动
    new Vue({
        el: '#app',
        //让vue知道我们的路由规则
        router: router, //可以简写router
        render: c => c(App),
    })
    

    最后记得在在app.vue中“留坑”

    //app.vue中
    <template>
        <div>
            <!-- 留坑,非常重要 -->
            <router-view></router-view>
        </div>
    </template>
    <script>
        export default {
            data(){
                return {}
            }
        }
    </script>
    

    五、路由传参

    路由传参有三种方式:

    分别是query,params,动态路由传参

    接收方式:

    通过query方式传递过来的参数一般是通过this.$route.query接收
    通过params方式传递过来的参数一般是通过this.$route.params接收
    通过动态路由传参方式传递过来的参数一般是通过this.$route.params接收

    六、路由导航守卫

    路由导航守卫分三种

    分别是:全局路由守卫、路由独享守卫、组件级的路由守卫

    • 全局前置守卫 router.beforeEach 进入路由之前
    • 全局解析守卫 router.beforeResolve
    • 全局后置守卫 router.afterEach 进入路由之后就没有next参数

    全局前置守卫

    • 你可以使用 router.beforeEach 注册一个全局前置守卫:
    const router = new VueRouter({ ... })
    
    router.beforeEach((to, from, next) => {
      // ...
    })
    
    每个守卫都有三个参数:
    • to: Route: 即将要进入的目标路由对象

    • from: Route: 当前导航正要离开的路由

    • next: Function: 钩子函数,里面定义参数,确认下一步路由要做什么

    • next(’/’)或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,next({name: ‘home’}) 。

    一般应用在用户未能验证身份时重定向到 /login :

    //全局前置守卫
    router.beforeEach((to, from, next) => {
      if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
      else next()
    })
    

    全局解析守卫

    • 在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用

    全局后置钩子

    • 守卫不同的是,后置钩子不会接受 next 函数也不会改变导航本身:
    //全局后置钩子函数
    router.afterEach((to, from) => {
      // ...
    })
    

    路由独享守卫

    • 你可以在路由配置上直接定义 beforeEnter 守卫:
    const router = new VueRouter({
      routes: [
        {
          path: '/foo',
          component: Foo,
          //路由独享守卫
          beforeEnter: (to, from, next) => {
            // ...
          }
        }
      ]
    })
    
    • 路由独享守卫与路由全局前置守卫用法一样都有三个参数(to,from,next)

    组件内的守卫

    可以在路由组件内直接定义以下路由导航守卫:

    • 进入组件前的守卫 beforeRouteEnter
    • 路由更新时的守卫 beforeRouteUpdate (2.2 新增)
    • 离开组件时的守卫 beforeRouteLeave
    • 下面请看代码实例:
    const Foo = {
      template: `...`,
      beforeRouteEnter(to, from, next) {
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不能获取组件实例 `this`
        // 因为当守卫执行前,组件实例还没被创建
      },
      beforeRouteUpdate(to, from, next) {
        // 在当前路由改变,但是该组件被复用时调用
        // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
        // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
      },
      beforeRouteLeave(to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
      }
    }
    
    • beforeRouteEnter 守卫 不能 访问 this,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。

    • 不过,你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。

    • 下面请看代码实例:

    beforeRouteEnter (to, from, next) {
      next(vm => {
      vm.$store.state.token
        // 通过 `vm` 访问组件实例
      })
    }
    
    • 注意 beforeRouteEnter 是支持给 next传递回调的唯一守卫。对于 beforeRouteUpdatebeforeRouteLeave 来说,this 已经可用了,所以不支持传递回调,因为没有必要了。
    • 下面请看代码实例:
    beforeRouteUpdate (to, from, next) {
      // just use `this`
      this.name = to.params.name
      next()
    }
    
    • 这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
    • 下面请看代码实例:
    beforeRouteLeave (to, from, next) {
      const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
      if (answer) {
        next()
      } else {
        next(false)
      }
    }
    

    最后再说一下完整的导航解析流程:
    1、导航被触发。
    2、在失活的组件里调用 beforeRouteLeave 守卫。
    3、调用全局的 beforeEach 守卫。
    4、在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
    5、在路由配置里调用 beforeEnter。
    6、解析异步路由组件。
    7、在被激活的组件里调用 beforeRouteEnter。
    8、调用全局的 beforeResolve 守卫 (2.5+)。
    9、导航被确认。
    10、调用全局的 afterEach 钩子。
    11、触发 DOM 更新。
    12、调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。

    理论:

    路由原理

    路由分为History模式和Hash模式 我们经常使用的是History模式 前端的URL必须和实际向后端发起请求的URL一致 如果后端缺少对路由处理,将返回404错误
    Hash即地址栏URL中的 # 符号 hash虽然出现在URL中,但不会被包括在HTTP请求中,对后端完全没有影响,因此改变hash不会重新加载页面。

    路由传参:

    三种:
    分别是query,params,动态路由传参
    接收:
    通过query方式传递过来的参数一般是通过this.$route.query接收
    通过params方式传递过来的参数一般是通过this.$route.params接收
    通过动态路由传参方式传递过来的参数一般是通过this.$route.params接收
    路由守卫:

    2.路由守卫使用的方式有几种?

    全局的 单个路由独享的 组件级的

    3.vue-router全局有三个守卫:

    router.beforeEach 全局前置守卫 进入路由之前
    router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用 router.afterEach 全局后置钩子 进入路由之后 没有next

    组件内的守卫:

    进组组件前的守卫 beforeRouteEnter 没有办法获取this,当前组件没有创建
    路由更新时的守卫 beforeRouteUpdata(2.2新增)
    离开组件时的守卫 beforeRouteLeave

    3. 路由守卫钩子函数里面的三个参数分别是什么?

    to,from,next 这三个参数:
    to和from是将要进入和将要离开的路由对象,路由对象指的是平时通过this.$route获取到的路由对象。
    next:Function 这个参数是个函数,且必须调用,否则不能进入路由(页面空白)。
    next() 进入该路由。
    next(false): 取消进入路由,url地址重置为from路由地址(也就是将要离开的路由地址)。 next 跳转新路由,当前的导航被中断,重新开始一个新的导航。

    路由跳转方式 一共四种方式
    1. router-link (不带参数)
    2. this.$router.push() (函数里面调用)
    3. this.$router.replace() (用法同push)
    4. this.$router.go(n)
    展开全文
  • 四、Vue路由详解

    千次阅读 2022-03-24 10:35:35
    Vue项目采用的是单页面应该(SPA),即整个应用只有一个页面,通过路由来在单页面中进行组件的切换,从而改变页面展示的内容。 二、路由的使用 2.1 安装插件 路由是一个插件,首先要安装插件。默认安装的是vue-router4...

    一、简介

    Vue项目采用的是单页面应该(SPA),即整个应用只有一个页面,通过路由来在单页面中进行组件的切换,从而改变页面展示的内容,而不发生页面的跳转。

    二、路由的使用

    2.1 安装插件
    路由是一个插件,首先要安装插件。默认安装的是vue-router4版本,对应的是vue3版本。这里使用vue2,所以要指定版本安装,安装vue-router3版本。

    npm i vue-router@3
    

    安装成功后,可以在package.json文件里看安装版本:
    在这里插入图片描述
    2.2 定义路由路径
    在src下创建router文件夹,定义index.js,里面配置路由映射路径:

    //该文件用于创建整个应用的路由器
    import VueRouter from 'vue-router'
    
    //引入组件,这里引入需要配置跳转路径的组件,这种组件也称为路由组件
    import HelloWorld from './components/HelloWorld.vue';
    import HelloHello from './components/Demo.vue';
    
    //创建一个路由器对象
    const router= new VueRouter({
        routes:[//配置路由规则
            {
                path:'/HelloWorld', //组件的跳转路径
                component:HelloWorld  //要跳转的组件
            },
            {
                path: '/HelloHello',
                component: HelloHello
            }
        ]
    })
    
    //暴露路由器的对象
    export  default router;
    

    2.3 Vue实例引入路由器
    在main.js中,引入VueRouter和上述定义的router对象

    //引入VueRouter
    import VueRouter from 'vue-router'
    
    //引入路由器
    import router from './router'
    

    使用router插件:

    Vue.use(VueRouter)
    

    使用该插件后,Vue对象中,就可以定义router属性了,然后把暴露出来的router对象传进去。

    //创建vm
    new Vue({
    	el:'#app',
    	render: h => h(App),
    	router:router
    })
    
    

    2.4使用路由实现组件跳转切换
    在切换组件的按钮处,用<router-link>标签包裹,to属性写index.js里配置的路由路径。实现点击内容,切换组件的效果,如下:

    <router-link to="/HelloWorld">Hello</router-link><br>
    <router-link to="/HelloHello">Demo</router-link>
    

    在展示内容区域,用<router-view>占位,会自动在该区域展示组件内容:

     <router-view></router-view>
    

    注意:一般称定义在<router-link>中的组件为路由组件。一般把路由组件都放在pages文件夹下。非路由组件放在components文件夹下。

    2.5 知识升华
    当使用vue-router插件后,所有的组件实例里,包括路由组件和非路由组件,都会有$router属性和$route属性。
    $route属性每个组件都存着自己组件的路由信息,每个组件各不相同,如下图:
    在这里插入图片描述
    里面有fullPath属性,meta属性,params属性和query属性等多个属性。
    $router属性全局都是一个同样的对象,它就是管理路由的路由器对象。
    在这里插入图片描述
    <router-link>切换组件时,默认情况下,每次被切换的组件都会被销毁,重新切换回该组件时,再重新创建该组件。

    三、多级路由

    当路由组件内部,也要切换路由时,可以在路由文件中配置多级路由。配置规则如下:
    在这里插入图片描述
    <router-link>跳转路径时,从父级路径开始写全路径:

    <router-link to="/home/news">News</router-link>
    

    四、路由传参

    上面讲到,在每个组件的$route属性中,都有query属性和params属性,这两个属性是用于在组件跳转时,携带参数,给跳转到的组件传递数据用的。
    4.1 query传参
    第一种写法:
    <router-link>的to属性中,在路由路径后面直接加?,然后拼接key=value&key=value传递参数,类似于get请求传参。当传递的参数用到组件中的数据时,需要在to前面加:,相当于v-bind的简写。但是加了冒号后,to里面的全部内容都会当成js表达式来解析,而url的路径不是js表达式,这么写肯定会报错。所以需要用分隔符`来包裹url数据,然后用${}来获取组件中的数据,写法如下:
    在这里插入图片描述
    这样,切换到的组件的route属性的query里面,就有router-link中传递过来的参数了。
    在这里插入图片描述
    第二种写法:
    router-link标签的to属性,写成对象的形式,如下:
    在这里插入图片描述
    写成对象的形式,path属性写路由的路径,query属性写传参。除了使用path属性外,还可以定义name属性,来与路由组件进行映射,此时,index.js的路由配置里也要写name属性。
    需要注意的是,to属性写成对象后,query里的参数就无需写占位符了,直接写组件属性即可。
    接收到数据后,vc实例就可以通过route.query.xxx来获取值了。

    4.2 params传参
    使用params传递参数,类似于resultful风格的url进行参数传递。
    首先,在router/index.js里的路由路径里,写参数占位符,如下:
    在这里插入图片描述

    <router-link>中传参时,用RestFul风格传参。如下:
    在这里插入图片描述
    注意:给params传参时,to属性里写成对象时,必须用name属性映射路由,不能用path属性映射

    切换到组件后,组件的$route.params里就有参数了。
    props属性
    在配置params传参的配置文件中,可以配置props属性,这样,在接收参数的组件中,通过props属性就可以直接调用参数属性获取值了,无需再写复杂的route.params获取参数了,props配置如下:
    在这里插入图片描述

    五、路由的其他特性

    5.1 <router-link>的replace属性
    当路由组件进行切换时,浏览器默认把上一个组件当成了历史记录,点返回键,会调到上一个切换的组件页面,称之为push模式。如果不想跳到上一个组件中,那么把该组件的router-link的属性设置为true。浏览器就不会记录这个地址,也不会返回这个组件,而是返回上一个replace为false的组件中去。
    在这里插入图片描述

    5.2 编程式路由
    所谓编程式路由,就是不通过router-link标签进行组件的切换,而是通过代码方式进行组件切换。
    在这里插入图片描述

    5.3 缓存路由组件
    上面讲到,当切换组件时,被切换的组件会被销毁,每次切换,都涉及到组件的销毁和重新创建,如果不想让组件重新销毁,比如用户在组件中输入了一些数据,等切换回来时,这些数据还要在页面保留,那么就不能进行销毁。
    需要进行特殊的设置,即在<router-view>占位符处,用<keep-alive>标签包裹。用include属性设置不被销毁的组件,写组件name属性。
    一个组件时:
    在这里插入图片描述
    多个组件时:
    在这里插入图片描述

    5.4路由组件独有的两个生命周期
    路由组件有两个新的生命周期,
    activated:路由组件被激活时触发
    deactivated:路由组件失活时触发。

    5.5 路由的meta属性
    在路由配置文件index.js中配置路由时,可以设置meta属性,来自定义一些信息。通常自定义一些标识信息,然后在路由守卫中,获取这些标识,进而判断是否放行等操作。
    5.6 路由的hash模式和history模式
    路由配置中,可以配置mode属性,默认是hash模式,这种模式下,浏览器的地址栏中,会有#。#后面的路径,都是vue项目内部跳转的路径,其不会传到服务器后台,#及#后面的路径,称之为hash路径。
    mode属性可以设置为history,这样,浏览器地址栏中就没有#了。这种模式的弊端是,vue内部跳转的路径,也会发送给服务器后台,这样就会造成后台服务器返回404错误,因为vue内部跳转的路径,后台服务解析。这就需要后台服务进行一些处理了。

    六、路由守卫

    相当于访问某个路由组件时,给路由组件加了一个拦截器,这个拦截器就叫守卫。
    全局前置守卫
    在访问每个路由前,执行的一段代码,写法如下:
    在router/index.js里,定义完router对象后,定义beforeEach函数:

    // 前置路由守卫(路由导航)
    router.beforeEach((to, from, next) => {
         console.log('to:', to)
         console.log('from:', from)
        if (to.path == '/home') {
            console.log('做逻辑判断')
        }
        // 下方这个next是适配所有路由的,放行操作,如果没有next,则会卡住,不会跳转进路由组件
        next()
    })
    

    beforeEach函数的调用时机:初始化时调用一次,以及每次路由切换时,调用一次。
    全局后置守卫
    在router/index.js里定义完router对象后,调用afterEach函数,定义全局后置守卫:

    // 进入路由后方法勾子
    router.afterEach((to, from) => {
        console.log(to, '后置第一个参数')
        console.log(from, '后置第二个参数')
        /*
          to 目标路由
          from 源路由
        */
        if (to.meta.title) {
            console.log(to.meta.title);
        } else {
            console.log('暂无名称');
        }
    });
    

    调用时机:初始化时调用一次,以及每个路由切换后,调用一次。
    后置全局路由不用放行,没有next参数。

    独享守卫
    写在路由配置文件的某个组件内,而不是写在router定义完后。与前置守卫类似,但是只拦截某一个路由。

    {
                path: '/HelloHello',
                component: HelloHello,
                beforeEnter(to,from,next){
                    if(to.path==="/test"){
                        alert("请登录");
                        next(false); // 禁止跳转
                    }else{
                        next()
                    }
                }
            }
    

    独享守卫只有前置拦截,没有后置拦截。

    组件内守卫
    不在路由的js里写,而在组件内部写的路由,包括beforeRounterEnter和beforeRouterLeave属性
    通过路由规则,进入该组件时调用和通过路由规则,离开该组件时被调用。
    与上述讲到的activated和deactivated类似,不同的是,组件内守卫必须通过路由规则进入时才会进入beforeRounterEnter和beforeRouterLeave,而直接写组件标签调用的方式进入组件不会走这两个方法。

    展开全文
  • 去除路由中的#,只需要在router.js文件中加一个mode: 'history' //在router.js文件中 const router = new Router({ // mode: 'history', routes: [ { path: '/', redirect: '/login' }, { path: '/login', ...
  • Vue路由管理

    2021-10-10 00:15:39
    路由管理1.什么是路由?2.Vue-Router3.基本使用4.对象属性5.动态路由6....后端路由是通过用户请求的URL分发到具体的处理程序,从而使浏览器每次跳转到不同的页面 服务器收到请求后,将数据和模板组合
  • 文章目录Vue 进阶学习1、webpack 打包2、vue-router 路由2.1、安装 vue-router 路由2.2、创建一个router文件夹2.2、将路由的配置文件导入到main.js中2.3、创建一个Main组件,并将组件配置到router中2.4、使用router...
  • 不知道大家对vue 挂载路由到头部导航有多少了解,本篇文章主要就介绍vue 挂载路由到头部导航的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。路由是写好了...
  • Vue路由管理

    2021-03-15 09:28:36
    VUE路由管理 路由:根据不同的路径信息显示不同的页面 路由有两种模式:一个是history模式,一个是非history模式,如果是history模式,最终部署到后端时,不管什么页面最终都要返回首页给它,如果是非history...
  • vue路由跳转传参的几种方式

    千次阅读 2022-04-07 14:20:16
    vue.js中路由配置代码: import Layout from '@/layout' const repairRouter = { path: '/repair', component: Layout, alwaysShow: true, name: 'repair', meta: { title: '工单管理', icon: 'clipboard'...
  • import {useRouter, useRoute} from 'vue-router' export default { setup(){ // 获取路由器实例 const router = useRouter() //使用 //router.push..... 等等方法 // route响应式对象,监控变化,传值...
  • vue2路由

    2022-05-06 15:31:10
    路由(英文:route)就是对应关系, 路由分为前端路由和后端路由,比如前端路由就是,Hash 地址与组件之间的对应关系。 具体来说:一个路由就是一组key-value的对应关系 key 为 url 路径 value 可能是函数...
  • vue动态路由商品详情

    2020-05-12 22:32:21
    我们不可能为每一个商品都定义一个独立的组件,而是把它们都映射到同一个组件,同时 url后面的部分为动态变化的部分,我们会在设计路由的时候进行特殊的处理 import Vue from 'vue' import VueRouter from 'vue-...
  • vue常见面试题 1.vue优点? 2.vue父组件向子组件传递数据? 3.子组件像父组件传递事件? 4.v-show和v-if指令的共同点和不同点? 6.的作用是什么? 7.如何获取dom? 8.说出几种vue当中的指令和它的用法? 9. ...
  • vue项目中,切换路由时肯定会碰到需要登录的路由,其原理就是在切换路径之前进行判断,你不可能进入页面再去判断有无登录重新定向到login,那样的话会导致页面已经渲染以及它的各种请求已经发出。 一、如需要登录...
  • 从a进入b后,刷新b页面拿不到a页面进来的参数.或者b页面再进入c页面,并由c页面返回b页面,b页面丢失a页面传入的参数. 参数的传递使用的是vue-router, query传参let para = {id: info.subjId,subjInit: in...
  • vue路由全面详解(下):路由守卫、缓存路由组件(终于要把路由的常用知识写完啦)
  • 当hash发生变化时,浏览器并不会重新发送请求 发请求时并不会把hash带到浏览器请求中,但是会触发 window.hashchange事件,在这个事件参数中就可以获取到hash,之后就会根据hash的变化去更换路由。 window....
  • Vue Router 实现路由控制实战前言一、什么是单页面应用及实现前端路由的基本原理1.1、什么是单页面应用1.2、什么是路由及前端路由1.3、实现前端路由基本原理二、使用 Vue Router 实现前端路由控制2.1、1. 下载安装 ...
  • vue实现父子路由(组件)传值

    千次阅读 2020-07-03 10:51:35
    vm.$emit( eventName, […args] ) 参数: {string} eventName […args] 触发当前实例上的事件。附加参数都会给监听器回调。 ...1. 子路由中存入数据 ...2. 在父路由中绑定子路由传来...3.处理路由中传过来的数据 ...
  • 一:对表单的处理 表单数据的双向绑定: <input v-model="属性">//使用v-model双向绑定 表单修饰符:.number/.lazy/.trim <input v-model.number="num">//转换为数字类型 <input v-model.trim=" n...
  • 文章目录前言一、vue router 路由1、基础使用方式2、命名视图和命名路由2-1命名视图2-2 命名路由3、嵌套路由 路由传参4、路由的扩展部分 路由模式5、路由守卫总结 前言 一、vue router 路由 1、基础使用方式 1) 在...
  • 路由组件传参2.1 example012.1.1 example01-12.1.2 example01-22.1.3 example01-32.1.4 example01-42.1.5 example01-52.1.6 example01-63. 案例4. 默认处理5. 对象模式的6. 回调函数模式7. example027.1 example02-...
  • script脚本中使用props属性接住父组件传过来,如: <script> export default { props: ['data1','data2'],//data1,data2表示从父组件传过来 name: 'todoItem', methods:{ }, data() { return ...
  • 编程式导航用于在js中处理逻辑后需要页面进行跳转 vue-router中传递参数主要分两大类: 编程式的导航 router.push 声明式的导航 < router-link > 本文主要演示一下编程式导航 router.push 传递参数的实现。 ...
  • Vue Router4路由

    千次阅读 2021-08-04 15:12:48
    Vue Router4路由 官网:https://next.router.vuejs.org/zh/guide/essentials/route-matching-syntax.html 1、在vue-router是什么? Vue.js 的官方路由(就这么简单一句话) 2、Vue Router4 新特性 简单对比总结了...
  • vue router路由配置,元信息meta的使用-登录拦截验证

    千次阅读 多人点赞 2019-02-25 14:01:49
    路由基本配置 1.在router文件夹中找到 indexs.js ...引入路由以及vue,下面的是固定写法,照写就可以 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) 2.创建路由实例 c...
  • Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下:方法一:params传参:this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是(可以从当前组件或者Vue实例上直接...
  • 认识路由 路由的本质是一种 对应关系 ,程序开发分为前端路由和后端路由。url 地址和真实的资源之间就有一种对应的关系,就是路由 。...前端路由是依靠 hash (锚点链接)的变化来实现页面内容的切换,也就是
  • 1、vue组件的定义 在页面引入的组件同时也是Vue的实例(如:<mycom1></mycom1>) 什么是模块化:模块化从代码角度出发,分析项目,把项目中功能类似的代码抽离为一个个小的模块,为了以相同的方式去...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,737
精华内容 2,294
关键字:

vue怎么处理路由传过来的值