vue-learning: 37 - router - Catalog

vue vue-router routes

table of Contents

1. Front-end routing history
   1. Server-side rendering (SSR: server side render)
   2. The client routing (client side routing)
2. Front-end routing implementation principle
   1. hash mode: location.hash and hashChange events
   2. mode history: history and events popstate
3. vue-router
   1. The const router = new VueRouter (option) options object option
   2. Router instance object router
   3. Route Object route
   4. Characteristics router-link tag
   5. Characteristics router-view label
4. 5 Ways routing parameter passing
   to routing dynamic parameters: '/ user /: userId' and the params
   js const route = {path: '/user/:userId'} this.$router.push({path:`/user/${userId}`}) this.$route.params.userId
   2. named parameter passing route, using the name and the params
   js const route = {name:'home',...} this.$router.push({name:'Login',params:{id:'leelei'}}) this.$route.params.id
   3. query parameters passed parameters, and using the path Query
   js this.$router.push({path:'/login',query:{id:'leelei'}) this.$route.query.id
   4.prop forms: Boolean / object / function
   js const route = [{prop:true, ...}] const route = [{prop: {someProp:'someValue'}] const routes =[{props: (route) => ({ query: route.query.q }),...}]
   5.meta meta-information definition data
   js // 定义路由时，定义元信息 const routes = [ {meta: {someData:'someData'},... }, // 获取数据 this.$route.meta.someData