VueRouter基础知识（一）

1.什么是路由：关于前端和后端路由（由于我从来没有做过后端路由，所以在一些博客上找了一些相关的内容）：1.前端路由就是单个页面的路由，比如如www.abc.com/user/:id，当然后端路由也可以这样实现。后台路由是整个应用的路由，比如www.abc.com/user，www.abc.com/product。而且有时候你看到的url可能和后台请求的url不一样。2、前端路由应用场景就是所谓的单页面应用。在业务允许浏览器允许的情况下，使用前端路由可以让页面体验更好。但是在很多业务场景中并不适用，比如展示广告。页面上几乎不需要有其他逻辑，比如严谨的下单流程。后端路由可以严格控制前端进入页面，后端路由可以在API层面提供接口等很多场景使用。前后端路由的灵活选择会让你的业务体验相当不错，或者你在更深层次上使用同构，前后端共享一套路由。也是页面点击跳转等动作时的前端路由...3.前端路由只针对单页路由。不如把整个网站交给后台处理。2.路由父组件：子组件：main.js:importVuefrom'vue'importAppfrom'./App.vue'importVueRouterfrom"vue-router"Vue.use(VueRouter)importHomefrom"./components/home"constroutes=[{path:'/',component:Home,},{path:'/article',component:()=>import("./components/articles.vue"),},{path:'/about',component:()=>import("./components/about.vue"),}]constrouter=newVueRouter({routes,})Vue.config.productionTip=falsenewVue({render:h=>h(App),router,}).$mount('#app')效果如下：如果所有的配置都写在main.js里，会很难看，很难找，so:index.js:从“vue”导入Vue从“vue-router”导入VueRouter我importHomefrom"../components/home.vue"Vue.use(VueRouter)exportdefaultnewVueRouter({mode:'history',routes:[{path:'/',component:Home,},{path:'/article',component:()=>import("../components/articles.vue"),},{path:'/about',component:()=>import("../components/about.vue")},],})main.js:从'vue'导入Vue从'./App.vue'导入应用程序从'./router'导入路由器Vue.config.productionTip=falsenewVue({render:h=>h(App),router,}).$mount('#app')historymode,effect:3.注意点3.1配置路由时，一些组件进入时不需要显示第一次页面，最好使用异步组件{path:'/about',component:()=>import("./components/about.vue"),},3.2必须有to属性，表示切换到哪一个Path；而这个元素在渲染的时候默认被渲染为一个元素，使用tag属性，比如tag="li"来修改渲染结果。About结果：标签虽然变了，但还是可以点击的。3.3（可以写成单个标签），这个元素会渲染这个位置路由匹配的组件，渲染结果是一个div。4.两种模式5.总结vue-router的基本使用非常简单，接下来的文章会围绕vue-router展开。让我们一起努力，写出漂亮的代码！