Master the installation and use of vue-router in one article

This article brings you relevant knowledge about vue, which mainly introduces the relevant knowledge about the installation and use of vue-router. Let’s take a look at it together. I hope it will be helpful to everyone.

【Related recommendations: javascript video tutorial, vue.js tutorial】

vue-router Installation and use

1. Installation

Step 1: Install vue-router

npm install vue-router --save

Step 2: Use it in modular projects (because It is a plug-in, so you can install the routing function through Vue.use())

1. Import the routing object and call Vue.use(VueRouter)

2. Create routing instance and pass in routing mapping configuration

3. in Vue instancemountcreated routing instance

---

2. The configuration file of the router created using

is located in index.js# under the router folder under src. ##The content in the file

index.js is as follows:

Note: Although the router has been registered here, it needs to be hung. It only works on vue.

Mounting method:

Introduce

router in main.js under the src file, and Mounted on the vue instance.

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

Actual use case:

The key configuration in App.vue is as follows:

<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’s index.js file is as follows:

// 配置路由信息
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 Mount in:

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

[Related recommendations:

javascript video tutorial, vue.js tutorial]

The above is the detailed content of Master the installation and use of vue-router in one article. For more information, please follow other related articles on the PHP Chinese website!