vue 璺敱

Posted 2021-03-08

鏍囩锛?a href='http://www.mamicode.com/so/1/%e4%b8%8d%e5%90%8c' title='涓嶅悓'>涓嶅悓   his   render   ali   寮曞叆   瀵艰埅   recommend   瑙嗗浘   涓婄嚎   

璺敱

鏍规嵁鍦板潃鏍忕殑鏀瑰彉娓叉煋涓嶅悓鐨勭粍浠?/p>

鎺у埗鍦板潃鏍忕殑鏀瑰彉

<router-link></router-link>

<router-view></router-view>

瀹夎璺敱

 npm install vue-router

1. 閰嶇疆璺敱琛紙router/index.js锛?/h5>

  1.寮曞叆vue 
    import Vue from 'vue'

  2.寮曞叆璺敱
    import VueRouter from 'vue-router'

  3.浣跨敤璺敱
    Vue.use(VueRouter)

  4.鍒涘缓璺敱瀵硅薄
    let router = nwe VueRouter({
    
    })

  5.鎶涘嚭璺敱瀵硅薄
    export default router

  6.閰嶇疆璺敱 鍦板潃鏍忚矾寰勫拰缁勪欢鐨勮仈绯?    (1)寮曞叆缁勪欢
        import component1 from 鈥?./component1.vue鈥?
      let router = nwe VueRouter({
            //閰嶇疆璺敱璺緞鍙婂叾璺宠浆鐨勭粍浠?            routes;[
                {
                  path : '/component1',
                  components:component1
                }
            ]
        })

1. 娉ㄥ唽璺敱(main.js)

   import router from './router.index.js' //index.js鍙互鐪佺暐
   new Vue({
     router锛歳outer,    //key value涓€鏍?鍙互鐪佺暐
     render: h => h(App),
   }).$mount('#app')
   
   
   import router from './router'
   new Vue({
     router,
     render: h => h(App),
   }).$mount('#app')
   

2. router-view:鎸囩殑鏄樉绀鸿矾鐢辩粍浠跺尯鍩燂紝璺敱瀹瑰櫒锛屽熀浜巗lot鐨勫皝瑁?/h5>

   鍦ㄩ〉闈㈠紑鍚竴鐗囩┖闂?娓叉煋涓嶅悓鐨勭粍浠?/p>

   to灞炴€?锛?鐩稿綋浜巃鏍囩鐨刪erf灞炴€э紝鍚庨潰璺熻烦杞摼鎺ョ敤 锛堝０鏄庡紡瀵艰埅锛?/h6>

   //璺敱涓彲浠ラ€氳繃瀵硅薄鍜屽瓧绗︿覆杩涜璁块棶
   //涓嶅尯鍒嗗ぇ灏忓啓
   //鐩存帴璺宠浆
   <router-link to="/home" ></router-link>>
   
   //璁块棶璺敱璁剧疆path涓?home鐨勮矾鐢?<router-link :to="{path:"/home"}" replace></router-link>
   
   //璁块棶name锛氣€渉ome鈥濈殑璺敱 //鍖哄垎澶у皬鍐?<router-link :to="{name:"home"}" replace></router-link>

   query
   //浼犲€?    <router-link :to="{path:'/one',query:{a:2,b:3,c:{}}}">One</router-link>|
       <router-link :to="{name:'one',query:{a:5,b:7,c:{d:9}}}">One</router-link>|
   //鎺ユ敹
    console.log(this.$route.query.a,this.$route.query.b,this.$route.query.c);
   
   - 鍒嗘瀽
       浼樼偣锛氬埛鏂版暟鎹簱涓嶄細涓㈠け銆?    缂虹偣锛氬鏋滀紶閫掔殑鏄璞°€傚鏋滃埛鏂版帴鏀剁殑鏁版嵁浼氬彉鎴愬璞＄殑鍘熷鍊笺€俒Object,Object]

   params
   //浼犲€?     <!--params:鍙彲浠ラ€氳繃name杩涜鏁版嵁浼犻€掋€?->
        <router-link :to="{name:'two',params:{a:1,b:2,c:{d:4}}}">Two</router-link>|
   //鎺ユ敹
   console.log(this.$route.params.a,this.$route.params.b,this.$route.params.c);
   
   - 鍒嗘瀽
       浼樼偣锛氬彲浠ヤ紶閫掑璞?    缂虹偣锛氬埛鏂版暟鎹涪澶便€?/code>

   //浼犲€?      <!--<router-link to="/three/1/2">Three</router-link>|-->
           <!--<router-link to="/three-11-21.html">Three</router-link>|-->
           <!--<router-link to="/three/123412341234.html">Three</router-link>|-->
           <router-link :to="{path:'/three/123412341234.html',query:{a:1,b:2}}">Three</router-link>|
   
   //鎺ユ敹
     console.log(this.$route.params.id,this.$route.params.type)
   
   - 鍒嗘瀽
       浼樼偣锛氬埛鏂版暟鎹瓨鍦ㄣ€傚彲浠ヨ浣犵殑鍦板潃鏇村姞婕備寒銆?    缂虹偣锛氫笉鍙互浼犻€掑璞?/code>

   replace灞炴€?锛?椤甸潰鍒?鎹㈡椂涓嶄細鐣欎笅鍘嗗彶璁板綍

   <router-link :to="/home" replace></router-link>

   tag灞炴€?锛?鍏锋湁tag灞炴€х殑router-link浼氳娓叉煋鎴愮浉搴旂殑鏍囩

   <router-link :to="/home" tag="li">Home</router-link>
   <!-- 娓叉煋缁撴灉 -->
   <li>Home</li>
   //姝ゆ椂椤甸潰鐨刲i鍚屾牱浼氳捣鍒癮閾炬帴璺宠浆鐨勭粨鏋滐紝vue浼氳嚜鍔ㄤ负鍏剁粦瀹氱偣鍑讳簨浠讹紝骞惰烦杞〉闈?/code>

   active-class 灞炴€?锛?璁剧疆婵€娲婚摼鎺ユ椂class灞炴€э紝涔熷氨鏄綋鍓嶉〉闈㈡墍鏈変笌褰撳墠鍦板潃鎵€鍖归厤鐨勭殑閾炬帴閮戒細琚坊鍔燾lass灞炴€?涔熷彲浠ュ啓鎴恆ctiveClass)

   <router-link :to="/home" active-class="u-link--Active">Home</router-link>

   <router-link :to="/" exact>home</router-link>

   甯哥敤锛?/h5>

   • to 灞炴€ф帶鍒跺湴鍧€鏍忔敼鍙?/p>

   • tag 灞炴€ф帶鍒舵覆鏌撶殑鍏冪礌

   • active-class 娣诲姞娲昏穬鐘舵€佺殑绫诲悕

   let router=new VueRouter({ mode:'history',//'hash'榛樿, })

鍛藉悕璺敱

• 濡傛灉path鐗瑰埆闀匡紝鍙互缁欒矾鐢遍€氳繃name灞炴€ц捣涓€涓悕瀛?/p>

• 鍒囨崲鐨勬椂鍊欓€氳繃name 杩涜鍒囨崲

   routes:[
       {
           path:'/recommend/a/b/cc/d/d/e/e/d/d/d/d',
           name:'ha',
       }
     ]
  
  <router-link :to="name:'ha'"></router-link>

鍛藉悕瑙嗗浘

• 涔熷氨鏄粰router-view鍛藉悕

• 鍙互璁﹔outer-view娓叉煋涓嶅悓鐨勭粍浠?/p>

  //1.缁欒鍥炬坊鍔爊ame灞炴€?
  <router-view name="r1"></router-view>
  <router-view name="r2"></router-view>
  //2.閰嶇疆璺敱index.js
    //- 寮曠敤
    import Recommend1 from  '../Recommend1.vue'
    import Recommend2 from  '../Recommend2.vue'
    //- 閰嶇疆
     components:{
           r1:Recommend1,
           r2:Recommend2,
         }
       //娉細components  鍔犱簡s

• 娌¤捣鍚嶅瓧鐨勬槸榛樿

  <router-view></router-view>
  
  components:{
           default:Recommend,
           r1:Recommend1,
           r2:Recommend2,
         }

  澹版槑寮忓鑸?/h5>

  澹版槑寮忓鑸槸鍐欏湪缁勪欢鐨則emplate涓紝閫氳繃router-link鏉ヨЕ鍙?/code>

  //$router璺敱瀵硅薄 this.$router.push("/my"); this.$router.push({path:"/my"}); this.$router.push({name:"my"}); this.$router.go(-1)// 杩斿洖 1鍓嶈繘 this.$router.go(1)// 鍓嶈繘

  push 涓?replace鍖哄埆

  褰撹烦杞〉闈负/a/b/c/d

  push杩斿洖浼氬厛杩斿洖鍒?c锛屽埌/b锛屽埌/a

  replace鏇挎崲杩斿洖浼氱洿鎺ヨ繑鍥炲埌鏈€鍒?/p>

  閲嶅畾鍚?- redirect

  • 鍒氳繘鍏ョ綉椤佃繘琛岄粯璁ょ粍浠剁殑鏄剧ず

        {
          path:"/home",   // 褰撹闂殑鍦板潃涓?home 浼氬皢鍦板潃閲嶅畾鍚戝埌/my
          redirect:"/my" 
      }

  璺敱浼犲弬

  this.$router.push({path:'/singer',query:{us:123,ps:123}}) this.$router.push({name:'singer',query:{us:123,ps:123}})

  this.$router.push({name:'singer',params:{us:123,ps:123}})

  3.鍔ㄦ€佽矾鐢憋細璺敱閰嶇疆璺緞鍙互鏀瑰彉

  • 鍙互灏嗚浼犻€掔殑鍙傛暟鏀惧湪璺緞涓紝瑙ｅ喅params鍒锋柊鍙傛暟涓㈠け闂

      //鍦ㄩ厤缃矾鐢辨椂鍔犫€橈細鈥? 
     {
        path:'/singer/:hehe/:xixi',
        name:'singer',
        component:Singer
      },
      //鏃犺鍦板潃鏍忓啓浠€涔堥兘鑳借烦杞?
      //渚嬶細/singer/1/2 params瀵硅薄涓?        params:{hehe:'1',xixi:'2'}

  閰嶇疆璺敱

   <router-view></router-view> 
  //涓€瀹氳璁板緱寮曠敤
      {
        path:'/my',
        component:My,
        children:[
          {
            path:'login', //涓嶉渶瑕佸姞鈥?鈥?          component:Login
          },{
            path:'info',
            component:Info
          }
        ]
      },

  404 { path:"*",// 褰撴壘鍒板尮閰嶇殑璺敱鏃讹紝璇ヨ矾鐢辩敓鏁堛€? component:()=>import("@/views/Error"), meta:{ isHide:true } }

  alias 鍒悕

  alias 锛氣€?鈥?  鐩稿綋浜庣粰璇ヨ矾鐢卞姞涓€涓叆鍙?

  以上是关于vue 璺敱的主要内容，如果未能解决你的问题，请参考以下文章

  VSCode自定义代码片段1——vue主模板

  VSCode自定义代码片段——.vue文件的模板

  VSCode自定义代码片段(vue主模板)

  VSCode自定义代码片段11——vue路由的配置

  VSCode自定义代码片段11——vue路由的配置

  VSCode自定义代码片段11——vue路由的配置