vue-router 路由基础的详解

今天我总结了一下vue-route基础，vue官方推荐的路由。

一、起步

HTML

rush:js;">

简单路由

// 渲染出口

创建模板（组件）：

(也可以用import 引入外部组件)

rush:js;"> var foo={template:"

我是foo 组件

"}; var bar={template:"

我是bar 组件

"};

组件注入路由：

rush:js;"> var routes = [ {path:'/foo',component:foo},{path:'/bar',component:b ar},];

创建路由实例：

rush:js;"> // 这里还可以传入其他配置 const router = new VueRouter({ routes // （缩写）相当于 routes: routes; });

注意这里 routes 没有 ‘ r ' (不要写成 routers)

创建vue实例（并挂载实例）

rush:js;"> var routerVue = new Vue({ router }).$mount("#myDiv");

二、动态路由匹配

有时候我们需要的是模板结构一样，当时数据不一样，就相当于我们要把不同ID的登录用户连接到同一个页面，但要显示每个用户的独立信息，这时我们就用到了动态路由匹配。

动态路由主要用到了全局 $route.params 和路由的动态参数，全局route 的 params API 存储着路由的所有参数，路径的参数用 “ ： ”来标记：

HTML

rush:js;">

链接时传入对应参数foo 和 bar

rush:js;"> const User = { template:'

我的ID是{{ $route.params.id }}

',// 在路由切换时可以观察路由 watch:{ '$route'(to,form){ console.log(to); //要到达的 console.log(form); } } }

const router = new VueRouter({
routes:[
{path:'/user/:id',component:User} // 标记动态参数 id
]
});

var myVue = new Vue({
router
}).$mount("#myDiv")

三、嵌套路由

1.嵌套路由讲的是我们可以在中去在渲染这时要在配置路由时使用 children

例如：

HTML：

rush:js;">

JS：

rush:js;"> const User = { template:'

我的ID是{{ $route.params.id }}

',}

// 子路由
const userChildOne = {
template:'

我是 userChildOne

'
}
const userChildTwo = {
template:'

我是 userChildTwo

'
}
const router = new VueRouter({
routes:[
{path:'/user/:id',component:User,children:[ // 用法和参数和routes 一样
{path:"/user/childone",component:userChildOne},{path:"/user/childtwo",component:userChildTwo}
]

]
});

var myVue = new Vue({
router
}).$mount("#myDiv")

四、命名路由

1.给路由命名指定路路由跳转，要用到参数name 和 v-bind

HTML:

rush:js;">

arams:{userId:'123'}}">Go to foo

arams:{userId:'456'}}">Go to bar

JS:

rush:js;"> const User = { template:'

我的ID是{{ $route.params.userId }}

',watch:{ '$route'(to,form){ console.log(to); console.log(form); } } }

const router = new VueRouter({
routes:[
// name 一一对应上
{path:'/user/:userId',name:"userOne",component:User},{path:'/user/:userId',name:"userTwo",component:User}
]
});

var myVue = new Vue({
router
}).$mount("#myDiv")

五、命名视图

1.给渲染视图 router-view 命名，来制定让那个视图渲染组件

HTML:

rush:js;">

arams:{userId:'456'}}">Go to bar

JS：

rush:js;"> // 四个模板 const UserA = { template:'

我是one,ID是{{ $route.params.userId }}

',} const UserB = { template:'

我是two,} const UserC = { template:'

我是three,ID是{{ <1ro>ute.params.userId }}

',} const UserD = { template:'

我是four,} const router = new VueRouter({ routes:[ // name 一一对应上 { path:'/user/:userId',components:{ // 注意这里为components 多个“ s ” default:UserA,b:UserB } },{ path:'/user/:userId',components:{ default:UserD,b:UserC } } ] });

var myVue = new Vue({
router
}).$mount("#myDiv")

六、重定向和别名

重定向和别名，首先我先来解释一下什么叫做重定向和别名

『重定向』的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，

『别名』 /a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。重定向主要用参数：redirect 而别名主要用到参数： alias

HTML:

rush:js;">

效果查看地址栏最后面的变化

JS:

rush:js;"> const User = { template:'

我是同一个页面

',} const router = new VueRouter({ mode:"history",routes:[ { path:'/User/foo',{ path:'/User/bar',redirect: '/User/foo',// 重定向的目标也可以是一个命名的路由： // 甚至是一个方法，动态返回重定向目标：

 // 别名设置
 { path:'/User/foo',alias: '/User/Car'}

]
});

var myVue = new Vue({
router
}).$mount("#myDiv")

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

路由路由路由的介绍路由详解

vue-router 路由基础的详解