Maîtrisez l'installation et l'utilisation de vue-router en un seul article

Cet article vous apporte des connaissances pertinentes sur vue, qui présente principalement les connaissances pertinentes sur l'installation et l'utilisation de vue-router. Examinons-le ensemble, j'espère qu'il sera utile à tout le monde.

【Recommandations connexes: Javascript Video Tutorial, vue.js Tutorial】

vue-router Installation et utilisation. 2 : Utilisez-le dans un projet modulaire (car il s'agit d'un plug-in, vous pouvez installer la fonction de routage via Vue.use())

Importez

objet de routage et appelez Vue.use(VueRouter) <hr>

1. 2. Utilisez

   Vue.use(VueRouter)

2. 创建路由实例，并传入路由映射配置

3. 在Vue实例中挂载创建的路由实例

---

二、使用

创建的router的配置文件在src下的router文件夹下的index.js文件中

index.js中内容如下：

注：虽然在这里已经注册了router，但是其需要被挂在在vue上，才能起作用。

挂载方法：

在src文件下的main.js中引入router，并挂载在vue

Le fichier de configuration du routeur créé se trouve dans le fichier index.js sous le dossier router sous src

Le contenu de index.js est le suivant :

Remarque : Bien que le routeur ait été enregistré ici, il doit être accroché à vue pour fonctionner.

Méthode de montage :

🎜Introduisez le router dans main.js sous le fichier src et montez-le sur l'instance vue supérieure. 🎜

npm install vue-router --save

🎜Cas d'utilisation réel : 🎜🎜La configuration clé dans App.vue est la suivante : 🎜

//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)
})

🎜Le fichier index.js du routeur est la suivante : 🎜

<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>

🎜Montage dans main.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('----');
})

🎜[Recommandations associées : 🎜Tutoriel vidéo javascript 🎜、🎜Tutoriel vue.js🎜】🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!