vue-router（vue路由基础详解）

时间：2023-03-31 17:21:30 vue.js

Vue.js路由（Vue-router）安装直接导入vue-router下载链接https://unpkg.com/vue-router/...npm下载npminstallvue-router如果在模块化项目中使用，必须通过Vue.use()ClearInstalltheroutingfunctionproperly:在你的文件夹下src文件夹下的main.js文件中写入如下代码importVuefrom'vue'importVueRouterfrom'vue-router'Vue.use(VueRouter)开始导入Vue和VueRouter插件写html

第一个router

第二个router

写jsvarroutes=[{path:"/one",component:{template:"#a"}},{path:"/two",component:{template:"#b"}},];//定义路由组件varrouter=newVueRouter({routes});//定义路由newVue({el:"#box",router});//创建并挂载实例到模板添加链接

一个两个

默认会被渲染成一个标签>>>to=""是我们定义的路由路由匹配的组件这里会渲染动态路由匹配，我们往往需要将所有匹配某种模式的路由映射到同一个组件中。比如我们有一个User组件，用来渲染所有不同ID的用户。那么，我们可以在vue-router的路由路径中使用“动态路径参数”（dynamicsegment）来实现这样的效果：{path:"/two:id",component:{template:"#b"},},当我们在地址后面直接添加任何字符时，我们会发现文件的内容随着我们的改变而改变。嵌套路由我们经常会把动态路由和嵌套路由一起使用。嵌套路由就是添加一个children，children是一个数组。并且我们还需要在原来的组件中添加来渲染chlidren内部的路由。

第二个路由器

user:{{$route.params.id}}

{path:"/two",component:{template:"#b"},children:[{path:":id",component:{template:"#c"}}]}，这样我们除了可以使用创建一个标签来定义导航链接之外，还可以使用router的实例方法来实现这样的编程式导航，我们也可以这样写代码。router.push(location)如果您想导航到不同的URL，请使用router.push方法。这个方法会向历史堆栈中添加一条新记录，因此当用户单击浏览器的后退按钮时，它会返回到之前的URL。单击时会在内部调用此方法，因此单击等同于调用router.push(...)。该方法的参数可以是字符串路径，也可以是描述地址的对象。例如：//stringrouter.push('home')//objectrouter.push({path:'home'})//namedrouterouter.push({name:'user',params:{userId:123}})//加上查询参数，就变成/register?plan=privaterouter.push({path:'register',query:{plan:'private'}})router.replace(location)和router很像。push一样，唯一的区别是它不是向历史记录中添加新记录，而是按照其方法名称所说的那样做——替换当前的历史记录。router.go(n)方法的参数是一个整数，表示历史记录向前或向后走了多少步，类似于window.history.go(n)。//浏览器记录前进一步，相当于history.forward()router.go(1)//后退一步记录，相当于history.back()router.go(-1)//前进三步记录router.go(3)//如果历史记录不够，会在链接路由时静默失败，或者执行一些跳转。您可以在创建Router实例时在路由配置中为路由设置名称。我们可以直接在route.var下面加一个nameroutes=[{path:"/one",name:"one",component:{template:"#a"}},{path:"/two",name:"two",component:{template:"#b"},},]要链接到命名路由，可以将对象传递给router-link的to属性：User

User

命名视图有时想同时显示多个视图（同级），而不是嵌套显示，比如创建一个有两个视图的布局，sidebar（侧边导航）和main（主要内容），这时候命名视图就派上用场了。您可以在界面中有多个单独命名的视图，而不是只有一个插座。如果router-view没有设置名称，则默认为default。当我们的视图如上时，会发现每条路由都渲染了两次，所以我们需要将视图命名为

'}varroutes=[{path:"/one",name:"one",components:{a:Foo,b:Bar}},]重定向和别名定向重定向(重定向）是通过各种方式将各种网络请求重定向到其他位置，用于网站调整或网页迁移到新地址。也是通过路由配置完成的。下面的例子是从/a重定向到/b：varrouter=newVueRouter({routes:[{path:'/a',redirect:'/b'}]})alias/a的别名是/b，意思是，当用户访问/b时，URL仍然是/b，但是路由匹配/a，就好像用户访问了/a一样。简单的说，给/a起个昵称叫/b，但本质上，/a上面对应的路由配置是：varrouter=newVueRouter({routes:[{path:'/a',component:A,alias:'/b'}]})“别名”功能允许您自由地将UI结构映射到任何URL，而不受配置的嵌套路由结构的限制。

上一篇：JwChat：一个基于Vue和ElementUI的极简聊天框组件

下一篇：vivo商城前端架构升级——多端统一探索、实践与展望

vue-router（vue路由基础详解）相关文章