vue-router のインストールと使用法を 1 つの記事でマスターする

この記事では、vue に関する関連知識を紹介しており、主に vue-router のインストールと使い方に関する関連知識を紹介していますので、一緒に見ていきましょう。 。

【関連する推奨事項: javascript ビデオ チュートリアル、vue.js チュートリアル】

vue-router のインストールインストール

ステップ 1: vue-router をインストールします

npm install vue-router --save

ステップ 2: モジュール型プロジェクトで使用します (これはプラグインなので、Vue.use()) を通じてルーティング関数をインストールできます。

1. ルーティング オブジェクトをインポートし、

   Vue.use(VueRouter) を呼び出します。 )

ルーティング インスタンス
2. を作成し、ルーティング

   マッピング構成

   を渡します。
Vue インスタンス

3. マウント作成された ルーティング インスタンス

---

2. 設定ファイル

を使用して作成されたルーターのファイルは、src の下の router

フォルダーの

index.js# にあります。 #ファイル #index.js の内容は次のとおりです:

注: ここではルーターが登録されていますが、ルーターは登録されている必要があります。これは vue でのみ動作します。

マウント方法:

src ファイル下の main.js に

router

を導入し、マウントします。 vue インスタンス。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">//main.js import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({   el: '#app',   router,   render: h =&gt; h(App) })</pre><div class="contentsignin">ログイン後にコピー</div></div>実際の使用例: App.vue の主要な構成は次のとおりです:

<template>
  <div>
    <h2 id="我是app组件">我是app组件</h2>
    
    <!-- 通过router自带标签实现 -->
    <router-link>首页</router-link>
    <router-link>关于</router-link> 
    <router-link>用户</router-link>
    <router-link>档案</router-link>
    <!-- <router-link to=&#39;/home&#39; tag="button" replace>首页</router-link>
    <router-link to=&#39;/about&#39; tag="button" replace >关于</router-link>-->

    <!-- 通过代码跳转 -->
    <!-- 
    <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button> 
    -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>

    <button>用户2</button>
    <button>档案</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data(){
    return{
      userId:&#39;yzk&#39;
    }
  },
  methods: {
    aboutClick() {
      // 通过代码的方式修改路由 vue-router
      // 不能如下操作：此操作会绕过路由进行修改，违背初衷
      // history.pushState({},&#39;&#39;,&#39;home&#39;)
      // this.$router.push("/home");
      this.$router.replace("/home");
      console.log("about");
    },
    homeClick() {
      // this.$router.push("/about");
      this.$router.replace("/about");
      console.log("home");
    },
    userClick(){
      this.$router.push(&#39;/user/&#39;+this.userId);
    },
    profileClick(){
      this.$router.push({
        path:&#39;/profile&#39;,
        query:{
          name:&#39;kobe&#39;,
          age:18,
          height:1.98
        }
      })
    }
  },
};
</script>

<style>
.router-link-active {
  color: red;
}
.active {
  color: pink;
}
</style>

Router の Index.js ファイルは次のとおりです:

// 配置路由信息
import Vue from 'vue'
import VueRouter from 'vue-router'
// import Home from '../components/Home'
// import About from '../components/About'
// import User from '../components/User'

// 懒加载,提高效率（因为app.js文件中集成了所有的业务代码，因此请求事件可能较长
// 通过将app.js分隔，在需要使用某些js代码的时候，才接收其代码）
const Home = () => import('../components/Home')
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')

const About = () => import('../components/About')
const User = () => import('../components/User')
const Profile = () => import('../components/Profile')



// 1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter)

// 2.创建VueRouter对象
const routes = [
  {
    path: '',
    //  component: Home
    // 重定向redirect
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    meta: { title: "首页" },
    children: [
      {
        path: '',
        redirect: 'news'
      },
      {
        path: 'news',
        //  注意这里是没有s的！！！
        component: HomeNews,

      },
      {
        path: 'message',
        component: HomeMessage
      },
    ]
  },
  {
    path: '/about',
    component: About,
    meta: { title: "关于" },
  },
  {
    path: '/user/:userId',
    component: User,
    meta: { title: "用户" },
  },
  {
    path: '/profile',
    component: Profile,
    meta: { title: "档案" },
  }
]
const router = new VueRouter({
  // 配置路由和组件间的映射关系
  routes,
  mode: 'history',
  linkActiveClass: 'active'
})

// 3.将router对象传入到Vue实例中
export default router

// 导航守卫 前置钩子
router.beforeEach((to, from, next) => {
  document.title = to.matched[0].meta.title
  console.log('+++');
  next()
})

// 导航守卫， 后置钩子 不需要调用next函数
router.afterEach((to,from) => {
  console.log('----');
})

main.js マウント場所:

import Vue from 'vue'
import App from './App'
import router from './router'


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

[関連する推奨事項:

javascript ビデオ チュートリアル

、

vue.js チュートリアル

]

以上がvue-router のインストールと使用法を 1 つの記事でマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。