vue-router路由配置方法
【摘要】
vue-router的配置使用
# 前端路由特点
优点 体验好,快速呈现缺点 不利SEO使用浏览器的前进后退时回重新发送请求，没有合理利用缓存单页面无法记住之前滚动的位置，无法在前进、后退的时候记住滚动的位置
# 基本使用
三个基本概念
route:是一条路由，由这个英文单词也可以看出来，它是单数。Home按钮 => home内容， 这是一条ro...
vue-router的配置使用
# 前端路由特点
- 优点
- 体验好,快速呈现
- 缺点
- 不利SEO
- 使用浏览器的前进后退时回重新发送请求，没有合理利用缓存
- 单页面无法记住之前滚动的位置，无法在前进、后退的时候记住滚动的位置
# 基本使用
三个基本概念
- route:是一条路由，由这个英文单词也可以看出来，它是单数。Home按钮 => home内容， 这是一条route；about按钮 => about 内容， 这是另一条route
- routes:是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]
- router:router是一个机制，相当于一个管理者，它来管理路由。当用户点击按钮的时候，router到routes中去查找对应的内容显示对应内容
- 客户端路由:dom元素的显示和隐藏。
- 两种实现方式
- hash
- html5 history api
- 两种实现方式
# 实现途径
- 页面实现
- <router-link>和<router-view>对应点击和显示部分
- <router-link>定义页面中点击的部分
- <router-view>定义点击后匹配的内容显示在什么地方
- <router-link>和<router-view>对应点击和显示部分
- js配置
- 定义route,由path和component组成
-
const routes = [
-
{ path: '/home', component: Home },
-
{ path: '/about', component: About }
-
]
- 创建router对路由进行管理
-
const router = new VueRouter({
-
routes // routes: routes 的简写
-
})
- router实例注入到 vue 根实例中
-
const app = new Vue({
-
router
-
}).$mount('#app')
# 动态路由
把某种模式匹配到的所有路由，全部映射到同一个组件。例如，有一个User组件，对于所有ID各不相同的用户，都要用这个组件来渲染。那么，我们可以在vue-router的路由路径中使用【动态路径参数】
当使用路由参数时，例如从/user/foo导航到/user/bar，原来的组件实例会被复用。因为两个路由都渲染同一个组件，比起销毁再创建，复用则显得更加高效。这也意味着组件的生命周期钩子不会再被调用
-
const User = {
-
template: '<div>User</div>
-
}
-
-
const router = new VueRouter({
-
routes: [
-
// 动态路径参数，以冒号开头
-
{ path: '/user/:id', component: User }
-
]
-
})
# 嵌套路由
由我们的页面结构所决定.
当我们进入到home页面的时候，它下面还有分类，如手机系列，平板系列，电脑系列。当我们点击各个分类的时候，它还是需要路由到各个部分，如点击手机，它肯定到对应到手机的部分
vue 提供了childrens 属性,相当于我们所写的routes
-
const routes = [
-
{
-
path:"/home",
-
// 下面这个属性也不少，因为，我们是先进入home页面，才能进入子路由
-
component: home,
-
// 子路由
-
children: [
-
{
-
path: "phone",
-
component: phone
-
},
-
{
-
path: "tablet",
-
component: tablet
-
},
-
{
-
path: "computer",
-
component: computer
-
}
-
]
-
}
-
];
# 命名路由
给路由加一个name 属性
-
{
-
path: "/user/:id",
-
name: "user",
-
component: user
-
}
使用:在router-link 中to 属性就可以使用对象
-
<router-link to="/user/123">User123</router-link> // 和下面等价
-
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
-
// 当使用对象作为路由的时候，to前面要加一个冒号,表示on-bind绑定，否则会被当成对象
# 编程式路由
借助router的实例方法，通过编写代码实现
点击< router-link >时，这个方法会在内部调用，所以说，点击< router-link :to=”…”>等同于调用router.push(…)
this.$router.history.push('要跳转路由的地址')
-
<script>
-
export default {
-
methods:{
-
toCart(){
-
//this.$router.push("/carts");
-
//this.$router.push({path:"/carts"});
-
this.$router.push({path:"/carts?a=123"});
-
}
-
}
-
}
-
</script>
文章来源: blog.csdn.net，作者：薛定喵君，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/jsxg2009/article/details/115244328
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）