vue-router yes vue A plug-in in the framework .

vue-router Implementation principle

     vue-router adopt hash And History interface Two ways to realize front-end routing , Update page content without re requesting pages ” Is one of the cores of front-end routing principle .

Specific methods used

1. install vue-router ,npm install vue-router --save

2. Import vue-router

3. adopt vue.user() Using plug-ins

4. Create routing object

5. Import components

6. to configure URL Direct mapping relationship with components

7. export router object


stay vue-router in , adopt mode Parameter to determine which method to use , default hash.
history notes : If the browser does not support history New features , Then use hash mode
import VueRouter from 'vue-router' import Vue from 'vue' import Home from
'../components/Home' import About from '../components/About' //
adopt vue.use( plug-in unit ), Installing plug-ins Vue.use(VueRouter) // Create routing object const routes = [{ path: "", //
Retargeting item redirect: '/home' }, { path: '/home', component: Home }, { path: '/about',
component: About }] const router = new VueRouter({ // to configure URL Direct mapping relationship with group price routes,
// history pattern mode: 'history' }) // take router Object passed in to vue In the instance export default router
8. stay main.js Import in router object
import Vue from 'vue' import App from './App' import router from
'./router/index.js' Vue.config.productionTip = false /* eslint-disable no-new
*/ new Vue({ el: '#app', router, render: h => h(App) })
9. stay index.html Used in
<template> <div id="app"> <h2>hello world</h2> <router-link
to='home'> home page </router-link> <router-link to='about'> about </router-link>
<router-view></router-view> </div> </template>
router-view: When the route changes , Re execute render function .router-view The corresponding component will be found for rendering .

router-link: Create routing link label ( default a label ), Binding corresponding events , The method of routing instances based on attributes .

effect :