vue-router 路由

最新推荐文章于 2024-07-23 16:00:30 发布
最新推荐文章于 2024-07-23 16:00:30 发布
阅读量308 收藏
点赞数 1
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47906106/article/details/122941142
版权

根据不同的url地址,显示不同的内容,但显示在同一个页面中,称为单页面应用

2.基本用法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../router/vue.js"></script>
    <script src="../router/vue-router.js"></script>
    <style>
        /* .router-link-active {
            font-size: 20px;
            color: #ff7300;
            text-decoration: none;
        } */
        
        .active {
            font-size: 20px;
            color: #ff7300;
            text-decoration: none;
        }
    </style>

</head>

<body>
    <div id="item">
        <div>
            <!--使用router-link组件来定义导航,to属性指定链接url-->
            <router-link to="/home">主页</router-link>
            <router-link to="/new">新闻</router-link>
        </div>
        <div>
            <!--router-view 用来显示路由内容-->
            <router-view></router-view>
        </div>

    </div>
    <script>
        // 1.定义组件
        var Home = {
            template: '<h3>我是主页</h3>'
        }
        var News = {
                template: '<h3>我是新闻</h3>'
            }
            // 2.配置路由
        const routes = [{
                    path: '/home',
                    component: Home
                }, {
                    path: '/new',
                    component: News
                }, {
                    path: '/',
                    redirect: '/home' // 重定向 输入不存在的或者刚进入时都会先访问home
                }

            ]
            // 3. 创建路由实例
        const router = new VueRouter({
            // routes:routes
            //简写  路由中会有一个#
            routes,
            linkActiveClass: 'active', //更改活动链接的class类名     style


        });
        // 4.创建根实例并将路由挂载到vue上
        new Vue({
            el: "#item",
            router, //注入路由

        })
    </script>


</body>

</html>

3. 路由嵌套和参数传递

传参的两种形式：
	a.查询字符串：login?name=tom&pwd=123
		{{$route.query}}
	b.rest风格url: regist/alice/20
		{{$route.params}}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../router/vue.js"></script>
    <script src="../router/vue-router.js"></script>
    <style>
        /* .router-link-active {
            font-size: 20px;
            color: #ff7300;
            text-decoration: none;
        } */
        
        .active {
            font-size: 20px;
            color: #ff7300;
            text-decoration: none;
        }
    </style>

</head>

<body>
    <div id="item">
        <div>

            <router-link to="/home">主页</router-link>
            <router-link to="/user">用户</router-link>
        </div>
        <div>

            <router-view></router-view>
        </div>

    </div>

    <template id="user">
        <div>
            <h3>用户信息</h3>
            <ul>
                <!--查询字符串传参-->
                <router-link to="/user/login?name=tom&pwd=123" tag="li">用户登录</router-link>
                <router-link to="/user/regist/alice/456" tag="li">用户注册</router-link>
            </ul>
            <router-view></router-view>
        </div>
    </template>
    <script>
        // 1.定义组件
        var Home = {
            template: '<h3>我是主页</h3>'
        }
        var User = {
            template: '#user'
        }
        var Login = {
            template: '<h4>用户登录...... 获取参数：{{$route.query}}</h4>'
        }
        var Regist = {
                template: '<h4>用户注册......获取参数:{{$route.params}},{{$route.path}}</h4>'
            }
            // 2.配置路由
        const routes = [{
                    path: '/home',
                    component: Home
                }, {
                    path: '/user',
                    component: User,
                    children: [{
                        path: 'login',
                        component: Login
                    }, {
                        path: 'regist/:username/:password',
                        component: Regist
                    }]
                }, {
                    path: '/',
                    redirect: '/home' // 重定向 输入不存在的或者刚进入时都会先访问home
                }

            ]
            // 3. 创建路由实例
        const router = new VueRouter({
            // routes:routes
            //简写  路由中会有一个#
            routes,
            linkActiveClass: 'active', //更改活动链接的class类名     style


        });
        // 4.创建根实例并将路由挂载到vue上
        new Vue({
            el: "#item",
            router, //注入路由

        })
    </script>


</body>

</html>

4 .路由实例的方法

router.push()  添加路由,功能上与<route-link>相同
router.replace() 替换路由,不产生历史数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../router/vue.js"></script>
    <script src="../router/vue-router.js"></script>
    <style>
        /* .router-link-active {
            font-size: 20px;
            color: #ff7300;
            text-decoration: none;
        } */
        
        .active {
            font-size: 20px;
            color: #ff7300;
            text-decoration: none;
        }
    </style>

</head>

<body>
    <div id="item">
        <div>

            <router-link to="/home">主页</router-link>
            <router-link to="/user">用户</router-link>
        </div>
        <div>

            <router-view></router-view>
        </div>
        <hr>
        <button @click="push">添加路由</button>
        <button @click="replace">替换路由</button>
    </div>

    <template id="user">
        <div>
            <h3>用户信息</h3>
            <ul>
                <!--查询字符串传参-->
                <router-link to="/user/login?name=tom&pwd=123" tag="li">用户登录</router-link>
                <router-link to="/user/regist/alice/456" tag="li">用户注册</router-link>
            </ul>
            <router-view></router-view>
        </div>
    </template>
    <script>
        // 1.定义组件
        var Home = {
            template: '<h3>我是主页</h3>'
        }
        var User = {
            template: '#user'
        }
        var Login = {
            template: '<h4>用户登录...... 获取参数：{{$route.query}}</h4>'
        }
        var Regist = {
                template: '<h4>用户注册......获取参数:{{$route.params}},{{$route.path}}</h4>'
            }
            // 2.配置路由
        const routes = [{
                    path: '/home',
                    component: Home
                }, {
                    path: '/user',
                    component: User,
                    children: [{
                        path: 'login',
                        component: Login
                    }, {
                        path: 'regist/:username/:password',
                        component: Regist
                    }]
                }, {
                    path: '/',
                    redirect: '/home' // 重定向 输入不存在的或者刚进入时都会先访问home
                }

            ]
            // 3. 创建路由实例
        const router = new VueRouter({
            // routes:routes
            //简写  路由中会有一个#
            routes,
            linkActiveClass: 'active', //更改活动链接的class类名     style


        });
        // 4.创建根实例并将路由挂载到vue上
        new Vue({
            el: "#item",
            router, //注入路由
            methods: {
                push() {
                    router.push({
                            path: 'home'
                        }) // 添加路由,切换路由
                },
                replace() {
                    router.replace({
                            path: 'user'
                        }) //替换路由  没有历史记录
                }
            },
        })
    </script>


</body>

</html>

5.路由结合动画

<transition>
  <router-view></router-view>
</transition>

6.单文件组件

1. .Vue文件
.vue文件,称为单文件组件,是vue.js自定义的一种文件格式,一个.vue文件就是一个单独的组件,在文件内封装了组件相关的：html,css,js


.vue文件由三部分组成：<template>,<style>,<script>

2.vue-loader
浏览器本身并不认识.vue文件,所以必须对.vue文件进行加载解析,此时需要vue.loader。
类似的loader还有很多,如html-loader,style-loader

需要注意的是vue-loader是基于webpack的,webpack是一个工具,想使用vue-loader就必须配置webpack

3.webpack
webpack是一个前端资源模板化加载器和打包工具,它能够把各种资源都作为模块来使用和处理。实际上webpack是通过不同的loader将这些资源加载后打包,然后输出打包后的文件

webpack有一个核心配置文件：webpack.config.js,必须放在项目根目录下

4.实例 步骤

4.1 目录结构
webpack-demo
|.index.html
|.main.js 入口文件
|.App.vue vue文件
|.package.json 工程文件（依赖，配置）
|.webpack.config.js webpack配置文件
|.balelrc Babel配置文件

4.2 编写App.vue

4.3 安装相关模块

cnpm install vue -S

cnpm install webpack -D
cnpm install webpack-dev-server -D
cnpm install css-loader -D
cnpm install vue-style-loader -D
cnpm install file-loader -D

4.4 编写 main.js

七.vue-cli脚手架

vue-cli是一个vue脚手架,可以快速构架项目结构
vue-cli本身集成了多种项目模板
在这里插入图片描述

1.步骤
安装vue-cli,配置vue命令环境

cnpm install vue-cli -g   全局安装
vue --version  查看版本
vue list 查看可以使用的模板

2. 初始化项目 生成项目模板

			模板名       项目名
vue init webpack-simple vue-cli-demo

3.进入生成的项目目录,安装模块名

cd vue-cli-demo
cnpm install  // 安装依赖

4. 运行项目

npm run dev    //启动测试服务
npm run build // 将项目打包输出dist目录,项目上线的话要将dist目录拷贝到服务器上

1. 使用webpack模板

vue init webpack vue-cli-demo

ESLink 是用来同一代码规范和风格的工具，如缩进,空格

全局组件(插件)：

就是可以在main.js中使用vue.use()进行全局引入,然后再其他组件中都可以使用了
比如:vue-router

import VueRouter from 'vue-router'
Vue.use(VueRouter )

普通组件(插件)
每次使用时都要引入,如axios

import axios from 'axios'
季布，
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue-router路由详解
F1520080的博客
03-29 672
前端校招精编面试解析大全点击这里即可获取完整版pdf查看既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！[外链图片转存中…(img-HI4PpMDD-1711643999702)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）前端校招精编面试解析大全点击这里即可获取。
Vue路由（vue-router）详细讲解指南
weixin_30502157的博客
09-21 2202
中文文档：https://router.vuejs.org/zh/ Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转； 首先我们来学习三个单词（route，routes，router）： 　　route：首先它是个单...
【Vue实战教程】之 Vue Router 路由详解
最新发布
柯晓楠
07-23 2241
用Vue.js创建的项目是单页面应用，如果想要在项目中模拟出来类似于页面跳转的效果，就要使用路由。其实，我们不能只从字面的意思来理解路由，从字面上来看，很容易把路由联想成“路由器”。路由器的功能用一句话来概括，就是连接两个或多个网络的硬件设备。我们所说的路由，是指在一个应用程序中链接多个页面（组件）的一种配置，在一个全栈项目中，路由分为前端路由和后端路由。后端路由先来看一下后端路由，例如项目的服务器地址是页面1，地址 http://192.168.1.10:8080/index.html。
【狂神说Java】vue学习笔记09----vue-router路由
pan_h1995的博客
06-22 1251
说明
【Vue的路由】
橙子的博客
08-10 1824
routes,在路由表中包含多个route。
深入Vue-Router路由嵌套理解
12-09
接着我继续追问…(省略)…大致明白了情况，原来这位朋友没有理解Vue-Router嵌套的原理，下面整理了一下我对Vue-Router路由嵌套的理解 Vue-Router嵌套路由 首先假设项目中有两个路由Profile和Posts，按写法把他们...
vue3+webpack+vue-router路由封装+axios封装+vuex封装
05-23
vue3+webpack+vue-router路由封装+axios封装+vuex封装，下载资源中包括了vue3+webpack+vue-router路由封装+axios封装+vuex封装的相关代码，分别对vue-router路由进行了封装，对axios进行了封装，对vuex进行了封装，...
vue-router-nav-呈现vue-router路由的简约响应式导航栏。-Vue.js开发
05-27
vue-router-nav呈现vue-router路由的简约响应式导航栏。 观看演示。 依赖关系您需要拥有vue-router insta vue-router-nav简约的响应式导航栏，用于呈现vue-router的路由。 观看演示。 依赖关系您需要安装vue-router...
vue-router路由参数刷新消失的问题解决方法
01-21
场景：vue-router实现的单页应用，登录页调用登录接口后，服务器返回用户信息，然后通过router.push({name: ‘index’, params: res.data})传给主页组件，并在主页显示数据。但是刷新页面后，数据就消失了。 解决...
浅谈vue-router路由切换 组件重用挖下的坑
10-16
在Vue.js应用中，路由管理通常使用vue-router来实现，它允许我们定义多个路由并根据URL的变化渲染不同的组件。然而，当两个路由指向同一个组件时，vue-router会复用组件以提高性能，但这可能导致组件的一些状态无法...
vue-router路由
唯见青山不见君
11-14 307
vue-router路由
【Vue】vue-router 路由
✈ 正在努力 の 寒江（StudiousTiger) ✌ 呐 ✈
07-25 470
文章目录一、什么是vue router二、vue router的安装三、vue router的使用第一步：依赖组件的搭建第二步：路由配置文件的创建于配置第三步：在App.vue中使用路由 一、什么是vue router Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。 包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js
【Vue】路由vue-router详解
Ryoujou的博客
09-24 714
Vue-Router入门教学详解
vue路由
weixin_39976512的博客
01-10 296
路由 后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源 前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点，HTTP请求中不会包含hash相关的内容，所以，单页面程序中的页面跳转主要用hash实现 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由 路由的基本使...
Vue路由
weixin_45346741的博客
09-22 651
Vue路由1 Vue路由是什么？2 实现前端路由3 实现后端路由4 vue-rouer的使用5 vue-router举例 1 Vue路由是什么？ 2 实现前端路由 3 实现后端路由 4 vue-rouer的使用 1，引入html方法使用 2，模块化开发使用 5 vue-router举例 模拟一个手机端webapp ...
Vue-Router路由基础教程：简单案例解析
"vue-router路由简单案例介绍 - 一个关于vue-router使用详解的文章，分享了基本用法和组件渲染。" 在Vue.js应用中，vue-router是官方推荐的路由管理库，它使得页面间的导航和状态管理变得简单。这篇文章主要讲解了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

季布，

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值