vue-router路由配置方法

2020-03-27 08:57:26

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>定义点击后匹配的内容显示在什么地方
  • 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>
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-ND 3.0 许可协议。可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。

扫描下方二维码阅读当前文章

浏览器、微信扫码
微信小程序

评 论:

好文推荐
极客之路公众号
加入两百人技术交流群
探讨前端、小程序开发及逆向、微信开发...
一起学习,共同成长
添加博主微信回复"加群"
微信情报 更多 >
    每天进步一点点~