[スイッチ]、実質的に使用してルータVUEを

ステップ1：cnpmインストールインストールVUE-ルータ--save  

基本的な構文ルーティングの設定

 

index.jsは、次のルータを導入しました

Vueがインポート「VUE」から; 
からインポートルータ「VUE-ルータ」; 

インポートからのHelloWorld「@ /コンポーネント/ HelloWorldの」; 
需要の導入は、ルーティング遅延ロードの下に書き込まれます。

輸出デフォルトの 新しいルータ（{ 
  ルータ：[{ 
    パス： "ルーター" 、
    コンポーネント： '' 、
    メタ：{} 
    の子供たち：[{ 
        パス： 'ルータ1' 、
        コンポーネント：ルータ1 
      }、
      { 
        パス： 'ルータ2' 、
        コンポーネント：ルータ2 
      } 
    ] 
  }] 
}）

在main.js中

インポートルータ'./router' // 引入

// 使用
新しいヴュー（{ 
  EL： '#app' 、
  ルータ、 
  店舗、
  コンポーネント：{ 
    アプリケーション
  }、
  テンプレート：  '<APP />' 
}）

 

コードの正式な側面 -

 

コンポーネント：

 

<テンプレート> 
  <DIV CLASS = "ルーター"> 
    <H3>路由基本使用</ H3> 
  </ div> 
</テンプレート> 

<スクリプト> 
エクスポートデフォルト{ 
  名： "ルーター" 、
  データ（）{ 
    リターン{}。
  } 
}。
</ SCRIPT> 

<スタイルスコープ> 
</スタイル>

 

ルートindex.js：

 

「VUE」からインポートヴュ。
インポートルータ「VUE-ルータ」。

// 组件 
「@ /コンポーネント/ルータ」からインポートルータ。


Vue.use（ルータ）。
エクスポートデフォルト 新しいルータ（{ 
  ルート：[{ 
    パス： "/ルーター" 、
    成分：ルータ、
  }] 
}）。

 

ジャンプルート 

 

トップに介してルータリンクに結合した標識を使用します

 

<=に「/ルータリンクライフサイクル」> ライフサイクル</ルータ・リンク>直接のレプリケーション
：<ルータリンク=「へ vuex </ルータ・リンク> vuex」> 変数に
データ（）{ リターン{ 
      vuex： " / vuex " 、
    }; 
  }

    

 

定義されたサブ経路

 

子路由1周期</ルーターリンク> <= "/ルーター/ルータ1"へのルータのリンク> 
子路由2img </ルーターリンク> <= "/ルータ2"へのルータのリンク> 
<ルータビュー> </ルータビュー>

 

ルート：[{ 
    パス： "/ルーター" 、
    成分：ルータ、
    子供：[{ 
        パス： 'ルータ1' 、
        成分：ルータ1 
      }、
      { 
        パス： 'ルータ2' 、
        成分：ルータ2 
      } 
    ] 
  }]

紫中国と増加がルートパスからのジャンプが「/」を追加しないでください

 

 

 

ルート通過パラメータ

 

1.ルーティング構成取得：  。この$のroute.params.id

 

直接写:
　　<router-link to="/router/router2/11111">子路由2img</router-link>      路由中一定别忘记了 path: 'router2/:名字',

 或者脚本:

<p @click="getDescribe('123')">子路由1周期</p>
　　methods: {
    getDescribe(id) {
      this.$router.push({
        path: `/router/router1/${id}`
      });
    }
  },
  mounted() {
    console.log(this.$route.params.id);
  }

 

2.params  获取: this.$route.params.id  

 

    <p @click="getDescribe('222222')">子路由1周期</p>

    methods: {
    getDescribe(id) {
      this.$router.push({
        name: "router1",
        params: {
          id: id
        }
      });
    }
  },
  mounted() {
    console.log(this.$route.params.id);
  }

可以看见 地址栏参数不显示  与query相反

 children: [{
        path: 'router1/:id',
        name: "router1",       //通过name值 params
        component: Router1
      },
      {
        path: 'router2',
        component: Router2
      }
    ]

 

3.query  获取: this.$route.query.id  

 

直接写:

　　<router-link :to="{path:'/router/router1',query:{id:'000'}}">子路由1周期</router-link>

  或者脚本:

<p @click="getDescribe('6666')">子路由1周期</p>
methods: {
　　getDescribe(id) {
      this.$router.push({
        path: "/router/router1",
        query: {
          id: id
        }
      });
    }
  }
//子组件
 mounted: function() {
    console.log(this.$route.query.id);
 }
注意看 现在的地址栏和上面两种方式不同 ?= 

 

 

 

上面例举了三种跳转传参 第一路由配置  第二params 第三query   注意获取的时候是$route   没有 r

 

下面三种跳转的方法与区别:push replace go 

 

router.go(n)
这个方法的参数是一个整数， 意思是在 history 记录中向前或者后退多少步， 类似 window.history.go(n)

methods:{
    next(){
        this.$router.go(1);  //前进
    },
    prevent(){
        this.$router.go(-1);  //后退
    }
}

 

router.push(location)
想要导航到不同的 URL， 则使用 router.push 方法。 这个方法会向 history 栈添加一个新的记录， 所以， 当用户点击浏览器后退按钮时， 则回到之前的 URL。

router.replace(location)
跟 router.push 很像， 唯一的不同就是， 它不会向 history 添加新记录， 而是替换掉当前的 history 记录。是当前一次哦~

 

 

 

路由的别名和重定向

 

别名:alias

 

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样

 

export default new Router({
  routes: [{
    path: "/",
    alias: '/router',
    component: router,
  }]
});

 

 

 

重定向:redirect

 

“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b

 

export default new Router({
  routes: [{
    path: "/",
    alias: '/router',
    component: router,
    redirect: '/watch'
  }, {
    path: "/watch",
    component: watch,

  }]
});

 

 

 

 router懒加载

 

export default new Router({
  routes: [{
    path: "/",
    alias: '/router',
    component: (resolve) => require(['@/components/router.vue'], resolve),
    children: [{
        path: 'router1/:id',
        name: "router1",
        component: Router1
      },
      {
        path: 'router2/:cy',
        component: Router2
      }
    ]
  }, {
    path: "/watch",
    component: (resolve) => require(['@/components/watch.vue'], resolve),
  }]
});

 

路由守卫钩子

 

beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
　　　 next(vm => {

    　　// 通过 `vm` 访问组件实例 　　})
 }

beforeRouteUpdate (to, from, next) { 
　　// 在当前路由改变，但是该组件被复用时调用
   // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
   // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
   // 可以访问组件实例 `this` 
　　next();
 }

beforeRouteLeave (to, from, next) { 
　　// 导航离开该组件的对应路由时调用 
　　// 可以访问组件实例 `this` 
　　next()
}

 

路由就告一段落了~~~~~~~~~~~~by~~~

---------------------
作者：love编程的小可爱
来源：CNBLOGS
原文：https://www.cnblogs.com/chen-yi-yi/p/11151941.html
版权声明：本文为作者原创文章，转载请附上博文链接！
内容解析By：CSDN,CNBLOG博客文章一键转载插件