有没有发现，在大家使用React/Vue的时候，总离不开一个小尾巴，到哪都得带着他，那就是react-router/vue-router，而基于它们的第三方框架又出现很多个性化约定和扩展，比如nuxtjs/nextjs/umijs都纷纷推出自己的路由方案。有没有想过，其实你可以完全摆脱他们都束缚？而且并不复杂，下面听我来分析分析：State可以控制一切UI首先React/Vue都是基于MVVM架构，State可以决定Component的显示与否，而且很简单：//jsx{show?:null}//vue也可以根据State来动态显示组件：控制UI的方法有很多，我就不例举了，总之State才是掌控
有没有发现，在大家使用React/Vue的时候，总离不开一个小尾巴，到哪都得带着他，那就是react-router/vue-router，而基于它们的第三方框架又出现很多个性化约定和扩展，比如nuxtjs/nextjs/umijs都纷纷推出自己的路由方案。有没有想过，其实你可以完全摆脱他们都束缚？而且并不复杂，下面听我来分析分析：State可以控制一切UI首先React/Vue都是基于MVVM架构，State可以决定Component的显示与否，而且很简单：//jsx{show?:null}//vue也可以根据State来动态显示组件：控制UI的方法有很多，我就不例举了，总之State才是掌控
vue3的官网地址：https://cn.vuejs.org/；这里要说一下，vue3不支持IE11，如果要兼容IE11及其一下，不建议使用vue3。创建vue脚手架，如果你需要使用ts，则需要node版本>=16。本文按照大于16的node版本来搭建一个vue3的脚手架。第一步：>npminitvue@latest 如果想创建指定版本，则使用 npminitvue@指定版本；“>”不要带上； 运行之后，会让你填写项目名称和选择你需要的插件，如下图 用空格键切换No/Yes; Projiectname：项目名称； Packagename:package.json里面name属
vue3的官网地址：https://cn.vuejs.org/；这里要说一下，vue3不支持IE11，如果要兼容IE11及其一下，不建议使用vue3。创建vue脚手架，如果你需要使用ts，则需要node版本>=16。本文按照大于16的node版本来搭建一个vue3的脚手架。第一步：>npminitvue@latest 如果想创建指定版本，则使用 npminitvue@指定版本；“>”不要带上； 运行之后，会让你填写项目名称和选择你需要的插件，如下图 用空格键切换No/Yes; Projiectname：项目名称； Packagename:package.json里面name属
Vue路由传参的两种方式query和params点击打开视频讲解更加详细一、router-link1.不带参数//name,path都行,建议用name//注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。2.带参数//params传参数(类似post)//路由配置path:"/home/:id"或者path:"/home:id"//不配置path,第一次可请求,刷新页面id会消失//配置path,刷新页面id会保留//html取参$route.params.id//script取参this.$route.params.id//query
Vue路由跳转的四种方式用法及区别点击打开视频讲解更加详细一、router-link//name,path都行,建议用name//注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。二、this.$router.push()this.$router.push('/home')this.$router.push({name:'home'})this.$router.push({path:'/home'})三、this.$router.replace()this.$router.replace('/home')this.$router.repl
Vue路由传参的两种方式query和params点击打开视频讲解更加详细一、router-link1.不带参数//name,path都行,建议用name//注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。2.带参数//params传参数(类似post)//路由配置path:"/home/:id"或者path:"/home:id"//不配置path,第一次可请求,刷新页面id会消失//配置path,刷新页面id会保留//html取参$route.params.id//script取参this.$route.params.id//query
Vue路由跳转的四种方式用法及区别点击打开视频讲解更加详细一、router-link//name,path都行,建议用name//注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。二、this.$router.push()this.$router.push('/home')this.$router.push({name:'home'})this.$router.push({path:'/home'})三、this.$router.replace()this.$router.replace('/home')this.$router.repl
Vue中的$router和$route的区别点击视频讲解更加详细this.$route：当前激活的路由的信息对象。每个对象都是局部的，可以获取当前路由的path,name,params,query等属性。this.$router：全局的router实例。通过vue根实例中注入router实例，然后再注入到每个子组件，从而让整个应用都有路由功能。其中包含了很多属性和对象（比如history对象），任何页面也都可以调用其push(),replace(),go()等方法。路由跳转分为编程式和声明式声明式：简单来说，就是使用router-link组件来导航，通过传入to属性指定链接（router-li
Vue中的$router和$route的区别点击视频讲解更加详细this.$route：当前激活的路由的信息对象。每个对象都是局部的，可以获取当前路由的path,name,params,query等属性。this.$router：全局的router实例。通过vue根实例中注入router实例，然后再注入到每个子组件，从而让整个应用都有路由功能。其中包含了很多属性和对象（比如history对象），任何页面也都可以调用其push(),replace(),go()等方法。路由跳转分为编程式和声明式声明式：简单来说，就是使用router-link组件来导航，通过传入to属性指定链接（router-li
