vue基础七

Yl郁

已于 2022-03-14 14:22:20 修改

阅读量408

点赞数

文章标签： vue.js 前端 javascript

于 2022-03-03 20:04:22 首次发布

本文链接：https://blog.csdn.net/HiYulinlin/article/details/123247013

版权

路由：路径和组件的映射关系

单页面应用(SPA): 所有功能在一个html页面上实现

vue-router本质是一个第三方包

vue-router（vue2）版本使用步骤：

下载vue-router模块到当前工程
在main.js中引入VueRouter函数
添加到Vue.use()身上 – 注册全局RouterLink和RouterView组件
创建路由规则数组 – 路径和组件名对应关系
用规则生成路由对象
把路由对象注入到new Vue实例中

用router-view作为挂载点, 切换不同的路由页面

import Vue from 'vue'
import App from './App.vue'

import Find from '@/views/Find'
import My from '@/views/My'
import Part from '@/views/Part'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        redirect: '/find',
    },
    {
        path: '/find',
        name: 'find',
        component: Find,
    },
    {
        path: '/my',
        name: 'Mys',
        component: My,
    },
    {
        path: '/part',
        name: 'Part',
        component: Part,
    },
    {
        path: '/part/:username',
        component: Part,
    },
    // 最下面设置找不到页面的规则
    {
        path: '*',
        component: NotFind,
    },
]

const router = new VueRouter({
    routes,
    // mode:'history'
})

Vue.config.productionTip = false
new Vue({
    router,
    render: (h) => h(App),
}).$mount('#app')

声明式导航：用组件router-link来替代a标签

vue-router提供了一个全局组件 router-link
router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)

router-link提供了声明式导航高亮的功能(自带类名)

<template>
    <div>
        <div class="footer_wrap">
            <router-link to="/find">发现音乐</router-link>
            <router-link to="/my">我的音乐</router-link>
            <router-link to="/part">朋友</router-link>
        </div>
        <div class="top">
         <router-view></router-view>
        </div>
    </div>
</template>

声明式导航 – 类名区别：

router-link-exact-active (精确匹配) url中hash值路径, 与href属性值完全相同, 设置此类名
router-link-active (模糊匹配) url中hash值, 包含href属性值这个路径

声明式导航 - 跳转传参：

to="/path?参数名=值"（接收：$route.query.参数名）

路由规则path上定义 /path/:参数名；to="/path/值"（接收：$route.params.参数名）

<template>
    <div>
        <div class="footer_wrap">
            <router-link to="/find">发现音乐</router-link>
            <router-link to="/my">我的音乐</router-link>
            <router-link to="/part?name=小红">朋友</router-link>
             <router-link to="/part/小蓝">朋友</router-link>
        </div>
        <div class="top">
         <router-view></router-view>
        </div>
    </div>
</template>
------------------------------------------------------------------
 <p>用户：{{$route.query.name}} {{$route.params.username}}</p>
------------------------------------------------------------------
    {
        path: '/part/:username',
        component: Part,
    },

路由 - 重定向：匹配path后, 强制跳转path路径

网页打开url默认hash值是/路径
redirect是设置要重定向到哪个路由路径

    {
        path: '/',
        redirect: '/find',
    },
-----------------------------
    {
        path: '*',
        component: NotFind,
    },

路由 - 404：找不到路径给个提示页面

路由最后, path匹配*(任意路径) – 前面不匹配就命中最后这个

全局前置守卫：路由跳转之前, 会触发一个函数

语法：router.beforeEach（（to,from,next）=>{//路由跳转之前会先执行这里，决定是否跳转}）

参数1：要跳转到的路由（路由对象信息）目标
参数2：从哪里跳转的路由（路由对象信息）来源
参数3：函数体next（）才会让路由正常跳转切换，next（false）在原地停留，next（强制跳转到另一个路由路径上）

注意：如果不调用next（），页面会留在原地

const isLogin = false
router.beforeEach((to, from, next) => {
    if (to.path == '/my' && isLogin == false) {
        alert('请登录')
        next(false)
    } else {
      next()
    }
})

路由 - 模式设置：修改路由在地址栏的模式

hash路由例如: http://localhost:8080/#/home
history路由例如: http://localhost:8080/home (以后上线需要服务器端支持, 否则找的是文件夹)

const router = new VueRouter({
    routes,
    // mode:'history'
})

路由 - 路由嵌套：现有的一级路由下, 再嵌套二级路由

一级路由path从/开始定义
二级路由往后path直接写名字, 无需/开头
嵌套路由在上级路由的children数组里编写路由信息对象

步骤：

创建需要的二级页面组件
路由规则里children中配置二级路由规则对象
一级页面中设置router-view显示二级路由页面

    {
        path: '/find',
        name: 'find',
        component: Find,
        children: [
            { path: 'recommend', component: recommend },
            { path: 'ranking', component: ranking },
            { path: 'songlist', component: songlist },
        ],
    },

编程式导航：用JS代码来进行跳转

语法：

this.$router.push({path:"路由路径"})
this.$router.push({name:"路由名"})

注意：虽然用name跳转，但是url的hash值还是切换path路径值

场景：方便修改：name路由名（在页面上看不见随便定义），path可以在url的hash值看到

编程式导航 -跳转传参：JS跳转路由, 传参

params（接收$route.params.参数名）
query（接收$route.query.参数名）

注意：

path会自动忽略params
推荐name+query方式传参
如果当前url上的hash值和？参数与你要跳转到的hash值和？参数一致，爆出冗余导航的问题，不会跳转路由。

<template>
    <div>
        <div class="footer_wrap">
            <span @click="fn('/find', 'find')">发现音乐</span>
            <span @click="fn('/my', 'Mys')">我的音乐</span>
            <span @click="onebtn">朋友</span>
            <span @click="twobtn">朋友</span>
        </div>
        <div class="top">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        fn(gpath, pname) {
            this.$router.push({
                // path:gpath
                name: pname,
            })
        },
        onebtn() {
            this.$router.push({
                name: 'Part',
                params: {
                    username: '小红',
                },
            })
        },
        twobtn() {
            this.$router.push({
                name: 'Part',
                query: {
                    name: '小蓝',
                },
            })
        },
    },
}
</script>

//@input事件方法中可以使用$event事件对象，拿到value值
<a-input :value='inputValue' 
@input="changeInputValue($event.target.value)" placeholder="请输入任务" class="my_ipt" />