[VUE] vue.js のルーティングルーター

序文：

この章では、Vue.js ルーティングについて紹介します。

Vue.js ルーティングを使用すると、さまざまな URL を介してさまざまなコンテンツにアクセスできます。

Vue.js を通じて、マルチビューのシングル ページ Web アプリケーション (シングル ページ Web アプリケーション、SPA) を実装できます。

Vue.js ルーティングでは vue-router ライブラリをロードする必要があります

中国語のドキュメントのアドレス: vue-router document。

1. ルーターをインストールします。

1. 直接ダウンロード/CDN

https://unpkg.com/vue-router/dist/vue-router.js

2、CNPM

タオバオミラーを使用することをお勧めします。

cnpm install vue-router  //会默认安装在node_modules文件中
//cnpm install -g vue-router //会安装在全局目录中（类似python的虚拟环境和全局环境）

2. シンプルなルーティング

1. ルーティングルールファイルを作成する

   1. パス: src/router/index.js

2. ルーターを V インスタンスにマウントする

   1. main.js ファイルのコメント 5.2

3. ルートパラメータのタイプ

   1. パスパラメータ (パラメータは名前を介してのみルートを導入でき、パスは未定義になります)
   2. クエリ文字列パラメータ (クエリは名前またはパスを通じてルートを導入できます)

4. ルートジャンプ

   1. ルーターリンクを使用する
   2. to 属性には、パス パス、名前付きルートのほか、パス パラメーターやクエリ文字列パラメーターを指定できます。

5. 要素 ui の場合 

ステップ：

1. 例の . を変更します。。。src/router/index.js に貼り付けます。

ルート作成サイトは別のファイルcomponents/router/index.jsに配置されます。

// track number of popstate listeners
import Vue from 'vue'
import VueRouter from 'vue-router'

// 1. Use plugin.
// This installs <router-view> and <router-link>,
// and injects $router and $route to all router-enabled child components
Vue.use(VueRouter)

// 2. Define route components 在src/router/index.js中导入子组件
import greeting from "../components/greeting";
import projectlist from "../components/projectlist";
import projectlistNew from "../components/projectlistNew";
import login from "../components/login";
import loginNew from "../components/loginNew";
import HelloWorld from "@/components/HelloWorld";

// 3. Create the router 在src/router/index.js中创建路由：一个routers数组中的一个对象，就是一条路由
const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/', component: HelloWorld,name:'hello-world'},
        { path: '/projectlist1', component: projectlist,name:'projectlist1' },
        { path: '/projectlist2', component: projectlistNew,name:'projectlist2' },
        { path: '/login1', component: login,name:'login1' },
        { path: '/login2', component: loginNew,name:'login2' },
        { path: '/greeting', component: greeting,name:'greeting' }
    ]
});
// 4、导出路由
export default router;

main.js ファイル:

//导入vue.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
//导入App.vue根组件
import App from './App.vue'
//5.1、导入vue router对象
import router from './router/index'
import loginNew from "@/components/loginNew";
//创建全局组件
Vue.component('login-New',loginNew);
//在导入Vue实例之前，要将element-ui插件加入到Vue中
Vue.use(ElementUI);
Vue.config.productionTip = false


new Vue({
    //5.2、把router挂载到Vue实例中去
  router,
  render: h => h(App),//渲染App根组件
}).$mount('#app')

 App.vueファイル

ルーティングを使用する前に:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/jack_li.png">
    <HelloWorld msg="欢迎来到 Vue.js App"/>
    <greeting data_1="这是个app父组件传参给子组件"/>
    <projectlist></projectlist>
    <projectlistNew></projectlistNew>
    <login></login>
    <login-New></login-New>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import greeting from './components/greeting.vue'
import projectlist from "@/components/projectlist";
import projectlistNew from "@/components/projectlistNew";
import login from "@/components/login";
import loginNew from "@/components/loginNew";

export default {
  name: 'App',
  components: {
    HelloWorld,
    greeting,
    projectlist,
    projectlistNew,
    login,
    loginNew
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

img {
  width: 150px;
  height: 150px;
}
</style>

 

 欠点: 別のページにジャンプするにはパスを手動で変更する必要があります

  ルーティングを使用した後:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/jack_li.png">
    <ul>
      <li>
        <router-link :to="{name:'hello-world'}">菜单一HelloWorld</router-link>
      </li>
      <li>
        <router-link :to="{name:'projectlist1'}">菜单二projectlist</router-link>
      </li>
      <li>
        <router-link :to="{name:'projectlist2'}">菜单三projectlistNew</router-link>
      </li>
      <li>
        <router-link :to="{name:'login1'}">菜单四login</router-link>
      </li>
      <li>
        <router-link :to="{name:'login2'}">菜单五loginNew</router-link>
      </li>
      <li>
        <router-link :to="{name:'greeting',params:{username:'高老庄'}}">菜单六greeting</router-link>
      </li>
      <li>
        <router-link :to="{name:'xibo_test_index'}">菜单七xibo_index</router-link>
      </li>
    </ul>
    <!--    展示路由的页面内容-->
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

img {
  width: 150px;
  height: 150px;
}
</style>

 

• App.vue の <template> タグ内の <router-view></router-view> にルーティング ページのコンテンツを表示します。
  • 欠点: 別のページにジャンプするにはルートを手動で変更する必要があります
  • 最適化: 親コンポーネントのラベルで <router-link to="routing path"></router-link> を使用し、ラベルをクリックしてページにジャンプします。
    • to 属性のデフォルトはパス値です。
      • 欠点: 1 つの場所が変更されると、2 つのローカル パスを変更する必要があります。
      • 最適化: name 属性をパスに追加してから親コンポーネントに追加できます: to="{name:name_value"}

3. ネストされたルーティング

Index.js ファイルでは、

{
    path: '/login1',
    component: login,
    name: 'login1',
    children: [
        // an empty path will be treated as the default, e.g.
        // components rendered at /parent: Root -> Parent -> Default
        // {path: '', component: login, name: 'login1'},
        //如果加/，则会从根路由开始匹配，http://localhost:8081/login2
        {path: '/login2', component: loginNew, name: 'login2'},
        //如果不加/，则会自动拼接到父路由后面，http://localhost:8081/login1/login2
        {path: 'login2', component: loginNew, name: 'login2'},

4. クエリ文字列パラメータ/パスパラメータ

4.1. サブコンポーネントでは、 this.$route.query.username を通じてクエリ文字列パラメータを取得できます。

methods:{
  //方法一：
  // changeusername:function (){
  //   this.username="dalao"
  // },
  //方法二：推荐使用
  changeusername(){
    this.username="一个没有整容需求的人"
  }
},
created() {
  console.log("实例创建之后，能够获取到this");
  console.log("username为：",this.username);
  this.username=this.$route.query.name;
  this.age=this.$route.query.age;

4.2.パスパラメータ: URL (ptah のパス + ":parameter")

クエリパスパラメータ、this.$route.params.username

 

路由文件index.js
const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/', component: HelloWorld,name:'hello-world'},
        { path: '/projectlist1', component: projectlist,name:'projectlist1' },
        { path: '/projectlist2', component: projectlistNew,name:'projectlist2' },
        { path: '/login1', component: login,name:'login1' },
        { path: '/login2', component: loginNew,name:'login2' },
        //路径参数：在url上（在ptah中路径+":参数")
        { path: '/greeting/:username', component: greeting,name:'greeting' }
    ]

子组件 greeting.vue
created() {
  console.log("实例创建之后，能够获取到this");
  console.log("username为：",this.username);
  this.username=this.$route.query.name;
  this.age=this.$route.query.age;
  this.username=this.$route.params.username;
  // this.age=this.$route.params.age;
},

4.2.1. パスパラメータを取得する別の方法もあります。

テンプレート内のパラメータは、{ {this.$route.params.username}}として記述されます。

<p>username为：{
   
   {this.$route.params.username}}</p>

その場合、created() に this.username=this.$route.params.username と記述する必要はありません。

created() {
    //获取路径参数
// this.username=this.$route.params.username;
    }

jqueryパラメータの受け渡しとparamsパラメータの受け渡しの違い

1. 使用方法:

前述したように、クエリは名前またはパスを使用して導入できます。

params は名前とともに導入する必要があり、受け取ったパラメータは次のように似ています。

this.$route.query.name和

2. アドレスバーの表現:

問い合わせ：

/login?id=10&name=zs

パラメータ：

/ログイン/12/ls

知らせ：

ここでの 12 と ls は /:id/:name に対応します。

これら 2 つのパラメータは書き込む必要はありません。書き込むとアドレス バーに表示されません。

ただし、ページを更新するとパラメータは表示されなくなります。

パラメータを書き込んでページを更新しても、パラメータは消えません。

 

クエリモードでのパラメータの受け渡し

パラメータを渡します:

this.$router.push({
        path:'/detail/:id',
        query:{
          id:id
        }
      })

パラメータを受信します。

this.$route.query.id

params モードでのパラメータの受け渡し

パラメータを渡します:

this.$router.push({
        name:'Detail',
        params:{
          id:id
        }
      })

パラメータを受信します。

this.$route.params.id

チップ：

params 経由でパラメータを渡す場合、params はルートを導入するために名前のみを使用できるため、push は name:'xxxx' であり、path:'/xxx' ではありません。ここに path を記述すると、パラメータを受け取るページが未定義になります。！！

ルートを切り替える

 

// query通过path切换路由
<router-link :to="{path: 'Detail', query: { id: 1 }}">前往Detail页面</router-link>
// params通过name切换路由
<router-link :to="{name: 'Detail', params: { id: 1 }}">前往Detail页面</router-link>

簡単に言うと、クエリは get リクエストに相当します。ページがジャンプすると、アドレス バーにリクエスト パラメータが表示されます。ブラウザが更新されてもページは消えません。Params は post リクエストに相当します。パラメータは表示されません。ブラウザが更新されるとアドレスバーに が表示され、ページが消えます。