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

This article brings you relevant knowledge aboutvue, 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 therouting object and callVue.use(VueRouter)

2. Createrouting instanceand pass in routingmapping configuration

3. inVue instancemountcreatedrouting instance

---

2. The configuration file of the router created using

is located inindex.js# under therouterfolder 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

routerinmain.jsunder the src file, and Mounted on thevueinstance.

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

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!