What is VueRouter
VueRouter is a management method for mapping components to routes. The main application scenario is to create SPA applications with VUE to change local content without refreshing, bringing good user experienceCopy the code
The basic use
Import vue from 'vue' import VueRouter from 'vuue -router' import Foo from '.. /components/Foo.vue' Vue.use(VueRouter) const router = new VueRouter({ routes:[ { path:'/foo', component: Foo}]}) export default router import router from './router' new Vue({router, render: h => h(App), }).$mount('#app')Copy the code
The router – the link and the router – the view
<router-link to="/foo? id=1&name=xxx"><button>foo</button></router-link> <! -- Route jump, which is interpreted by vue-Router as a link to: indicates the link to the destination route: When clicked, internal to the value passed to the router. Push (), the value can be a String | Object - > < the router - the view > < / router - the view > <! -- Routing view components, based on the route matching components will be placed here -->Copy the code
The query and params
Query uses <router-link to="/foo? id=1&name=xxx"><button>foo</button></router-link> <router-link : to = "{path: '/ bar, query: {id: 1, name:' XXX '}}" > < button > bar < / button > < / router - the link > query access id - {{$route. Query. Id}} name-{{$route.query.name}} <! $route.query = $route.query = $route.query = $route.query = $route.query to="/foo/1/xxx"><button>foo</button></router-link> <router-link : to = "{path: '/ bar, params: {id: 1, name:' XXX '}}" > < button > bar < / button > < / router - the link > params access to < div > id - {{$route. Params. Id}} Name -{{$route.params.name}}</div> path:'/foo/:id/:name'Copy the code
Route component parameters are transmitted
<div>id-{{$route.params.id}}name-{{$route.params.name}}</div> Component.props :true props: { newsletterPopup: False} props ({query} {return {id: query id, name: query name}} to get props: [' id ', 'name'], use: Use the mode of normal {{}} / * configuration in the configuration items props: components used props to accept, support Boolean | Object | Function form * / / * to a Boolean value of true, all the query parameters to the props * / refsCopy the code
Nested route and named route
Children: [{// When /foo/:id/:name matches successfully, // UserProfile will be rendered in foo <router-view> path: 'profile', Component: <router-link :to="{router-link :to="{router-link :to="{name: 'userProfile', params: { id: 123 }}">foo</router-link>Copy the code
Programmatic navigation
// Router.push ('home') // Router.push ({path: 'home'}) // Named router.push({name: 'home'}) 'user', params: { userId: '123'}}) // Step forward in browser record, equivalent to history.forward() router.go(1) // step back record, Router.go (-100) router.go(100) router.go(100)Copy the code

Navigation guard

Route. beforeEach((to,from,next) => {to // target object to enter from // Current navigation route to leave next // Function to resolve, }) Global post-guard initialization is executed at switch time, generally for closing work, BeforeEach ((to,from) => {to // target object to enter from // current navigation route to leave}) '/foo', component: Foo, beforeEnter: (to, from, next) => {//...}}] The guard inside the component is called before entering the component with routing rules, Import does not call beforeRouteEnter(to, from, next) {// Call beforeRouteEnter(to, from, next) {// Call beforeRouteEnter(to, from, next) {// No! Can!!!! }, beforeRouteUpdate(to, from, next) {// Called when the current route changes but the component is being reused. For example, For a path /foo/:id with dynamic parameters, the component instance will be reused as // renders the same foo component when jumping between /foo/1 and /foo/2. And the hook will be called in that case. // Call beforeRouteLeave(to, from, next) {} before leaving the component with routing rules.Copy the code
Hash and History modes
Hash # and hash # will not be sent to the server. History is enabled by default and can be changed by using mode:'history'. The difference is 1Copy the code