vue路由

redspider
108 阅读3分钟

这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战

前言

今天还是复习vue的一天，我们起来看一看vue的路由，路由模块也是这款框架的重中之重，我们要一起学习回顾一下吧。

路由器前代码
import Vue from '../lib/vue-2.4.0' 
import './index.scss'
window.vm=new Vue({
    el:'#app',
    data:{
        msg:"hello world",
        list:[
            1,2,3,4,5
        ],
        flag:false,
        jilin:'login'
    },
    methods: {
        del(index){
            this.list.splice(index,1)
        },
        fater(...son){
            alert("我是父亲"+son);
        },
        fater2(...son){
            alert("我是第二份父亲"+son);
        },
    },
    //进行定义组件
    components:{
        'login':{
            template:'#login',
            //绑定父组件传来的值
            props:['kh'],
            data() {
                return {
                    msg:111
                }
            },
            methods:{
                say(){
                    alert(11111)
                },
                son(){
                    alert('我是儿子方法')
                }
            }
​
        },
        'regist':{
            template:'#regist',
            data() {
                return {
                    msg:222
                }
            },
            methods:{
                say(){
                    alert("我是子组件")
                }
            }
        }
    }
})

路由

一、回顾与技术栈梳理

1.node-路由

指向当前应用的某个具体资源的路径

2.express

两层路由

app.js 具体的某个router文件

  1. sequelize orm的框架

持久层 特别容易特别方便

model 创建是手动的

sequelize-auto 快捷工具 model全自动生成

持久层只剩下调用api

  1. 升级pxpress成koa2

ctx

单层路由,允许在单层路由里定义多级路由

5.一阶段a标签定位到页面的某个位置

Bootstrap

二、前端路由的概念

vue 当作是页面显示的工具

  1. 锚点

#xxxx -->称为hash值

  1. 服务端的路由

定位服务端的唯一的资源

  1. 前端的路由

页面并没有跳转也不会刷新.知识基于url+#hash

定位到页面上的唯一的一个资源

==>vue里头其实就是定位到某个具体的组件

==>vue-router

(3.1) hash值不一样,只会定义到页面上某个具体的内容(a标签)

(3.2) 大前提: vue环境下,hash值变了,会让某个具体的组件显示出来,而且

同时会隐藏掉当前的组件

三、vue中router与route区别

1.$route对象

$route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。

1.$route.path** 字符串，对应当前路由的路径，总是解析为绝对路径，如"/foo/bar"。

2.$route.params** 一个 key/value 对象，包含了 动态片段 和 全匹配片段， 如果没有路由参数，就是一个空对象。

3.route.query∗∗一个key/value对象，表示URL查询参数。例如，对于路径/foo?user=1，则有route.query∗∗一个key/value对象，表示URL查询参数。例如，对于路径/foo?user=1，则有route.query.user == 1， 如果没有查询参数，则是个空对象。

4.$route.hash ** 当前路由的hash值 (不带#) ，如果没有 hash 值，则为空字符串。锚点*

5.$route.fullPath** 完成解析后的 URL，包含查询参数和hash的完整路径。

6.$route.matched** 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

7.$route.name 当前路径名字

8.$route.meta 路由元信息

route object 出现在多个地方:

组件内的 this.route和route和route watcher 回调（监测变化处理）;

router.match(location) 的返回值

scrollBehavior 方法的参数

导航钩子的参数：

router.beforeEach((to,from, next)=>{//to 和from都是 路由信息对象,后面使用路由的钩子函数就容易理解了})

img

2.$router对象

$router对象是全局路由的实例，是router构造方法的实例。

(2.1)push
1.字符串this.$router.push('home')
​
2. 对象this.$router.push({path:'home'})
​
3. 命名的路由this.$router.push({name:'user',params:{userId:123}})
​
4.带查询参数，变成 /register?plan=123this.$router.push({path:'register',query:{plan:'123'}})
push方法其实和<router-link :to="...">是等同的。
注意：push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。
(2.2)go
 页面路由跳转 
前进或者后退this.$router.go(-1) // 后退
(2.3)replace
push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面，
不会向 history 栈添加一个新的记录
// 一般使用replace来做404页面
this.$router.replace('/')
配置路由时path有时候会加 '/' 有时候不加,以'/'开头的会被当作根路径，就不会一直嵌套之前的路径。

img

3.区别

$router

$router是去全局的一个路由实例(全局变量),

  1. this.$router.push({path: '/login'}); // 路由跳转, 向 history 中增加一条记录
  2. this.$router.go(-1); // 路由前进(正数)或者后退(负数), 0刷新当前页面
  3. this.$router.replace({path: '/login'}); // 在 history记录中替换当前路径, 不记录.

$route

router是一个跳转的路由对象(局部变量),每一个路由都有自己的route,route中记录了当前路由的跳转的name,path,params,query;获取的时候,‘this.router是一个跳转的路由对象(局部变量), 每一个路由都有自己的route, route中记录了当前路由的跳转的name, path, params, query; 获取的时候, `this.route.path, this.route.query‘route.query`router

四、路由(vue-router)使用

(4.1)引包并使用
 引包 import VueRouter from '../lib/vue-router-3.0.1' 
 Vue.use(VueRouter)
(4.2)配置routes
  1. path 2.component 3.redirect 4.挂载路由 5.创建组件占位符(html) router-view
  2. 代码示例见后面
avatar
文章
阅读
粉丝