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
index.js
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 ：
Technology