基础语法2 - vue路由介绍

已于 2022-09-27 17:49:36 修改
阅读量339 收藏
点赞数
文章标签： vue.js javascript 前端
于 2022-09-27 17:49:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62898618/article/details/127075218
版权

目录

1.基础语法2 - vue路由介绍

1.样式绑定

2. 事件修饰符

3. 按键修饰符

4. 常用控件

4.1 常用控件示例

4.2 修饰符

5. 自定义指令

5.1 局部

5.2 全局

6. vue组件（重点）

6.1 组件介绍

6.2 局部组件

6.3 全局组件

案例代码 组件

7. 自定义事件

7.1 子 -> 父

7.2 父 -> 子

2.vue路由介绍与基本使用

2. SPA

2.1 SPA简介

2.2 SPA技术点

3. 使用路由建立多视图单页应用

3.1 引入依赖库

3.2 创建自定义组件

3.3 创建路由

3.3.1 什么是路由

3.3.2 定义路由

3.4 创建和挂载根实例

3.5 使用RouterLink和RouterView组件导航与显示

4. router-link相关属性

4.1 to

4.2 replace

4.3 append

4.4 tag

4.5 active-class

4.6 exact-active-class

4.7 event

4.8路由转参

4.8.1 query传参

4.8.2 params 方式传参 类似post 网页隐藏数据

4.8.3 props方式传参

1.基础语法2 - vue路由介绍

1.样式绑定

  • class绑定 使用方式：v-bind:，expression的类型：字符串、数组、对象

  • style绑定 v-bind:style="expression"， expression的类型：字符串、数组、对象

示例：

<--定义示例样式-->
<style> 
.fontClass { 
    font-size: 40px;
}
.colorClass {
    color: red;
}
</style>
​
<!--使用-->
<p>
    <span v-bind:class="fc">fafa</span>
</p>
<p>
    <!--简写-->
    <span :class="ac">fafa</span>
</p>
​
<p>
    <!--直接使用style样式单-->
    <span style="font-size: 40px; color:blue;">aaa</span>
    <br/>
    <!-- 使用vue，样式名称为驼峰风格 。花括号，多个属性逗号分隔-->
    <span :style="{fontSize:fontSize+'px',color: color}">bbb</span>
    <br/>
    <span :style="myStyle">test</span>
</p>
   <script>
var vm = new Vue({
    el: "#app",
​
    data: {
        fc: 'fontClass',
        ac: ['fontClass', 'colorClass'],
​
        fontSize: 40,
        color: 'green',
​
        //样式对象，注意：样式名使用驼峰命名，如：fontSize
        myStyle: {
            fontSize: '50px',
            color:'red',
            fontWeight: 'bold'
        }
    }
});
       </script>

2. 事件修饰符

几个常用的事件修饰符：

  • <!-- 提交事件不再重载页面 -->

    ​​

  • <!-- click 事件只能点击一次 --> <a v-on:click.once="doThis"></a>

  • <!-- 阻止单击事件冒泡 案例 多个盒子叠在一起 事件只触发点击的那一个 --> <a v-on:click.stop="doThis"></a>

  • <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a>

  • <!-- 添加事件侦听器时使用事件捕获模式 -->

  • ​ 
    <div v-on:click.capture="doThis">...</div>
    ​示例：
<div id="#app">

<div>接收消息：{{receverMsg}}</div>
<p>
    <!--响应多次或一次点击事件-->
    <input type="text" v-model="sendMsg">
    <button @click="sender">发送(多次)</button>
    <button @click.once="sender">发送(一次)</button>
</p>
<p>
    <!-- 阻止表单提交 -->
    <form action="testAction.action" method="post" @submit.prevent="doSubmit()">
        <label>名称</label>
        <input type="text" name="name"/>
        <input type="submit" value="提交"/>
    </form>
</p></div>

var vm = new Vue({
​
    el: "#app",
​
    data: {
        receverMsg: null,
        sendMsg: null
    },
​
    methods: {
        sender: function() {
            this.receverMsg = this.sendMsg;
        },
        doSubmit: function() {
            alert('ok');
        }
    }
​
});

3. 按键修饰符

Vue允许为v-on在监听键盘事件时添加按键修饰符。 示例：

keyCode实际键值
48到570到9
65到90a到z（A到Z）
a到z（A到Z）F1到F24
8BackSpace（退格）
9Tab
13Enter（回车）
20Caps_Lock（大写锁定）
32Space（空格键）
37Left（左箭头）
38Up（上箭头）
39Right（右箭头）
40Down（下箭头）

方案

在Vue中，已经为常用的按键设置了别名，这样我们就无需再去匹配keyCode，直接使用别名就能监听按键的事件。

<input @keyup.enter="function">
按键别名含义
.enter回车确认键
.tabTAB键
.delete捕获 "删除" 和 "退格" 键
.esc键盘左上角的Esc键，取消键
.space空格键
.up上
.down下
.left左
.right右
.ctrlctrl键
.shiftshift键
.altAlt
.meta(window系统下是window键，mac下是command键)

另外，Vue中还支持组合写法：

组合写法按键组合
@keyup.alt.67=”function”Alt + C
@click.ctrl=”function”Ctrl + Click

示例：响应enter键事件

<input type="text" @keyup.13="doSubmit" v-model="name">
var vm = new Vue({
​
    el: "#app",
​
    data: function() {
        return {
            name: 'hello vue'
        }
    },
​
    methods: {
        doSubmit: function() {
            alert("响应enter，" + this.name);
        }
    }
});

4. 常用控件

4.1 常用控件示例

通过实现一个类型注册的页面，熟悉常用的控件。文本框/密码框/文本域/单选/多选/下拉列表

<div id="app">
    <div>
        <label>账号：</label>
        <input type="text" v-model="uname">
    </div>
    <div>
        <label>密码：</label>
        <input type="password" v-model="upwd">
    </div>
    <div>
        <label>年龄：</label>
        <input type="text" v-model="age" >
    </div>
    <div>
        <label>性别：</label>
        <input type="radio" v-model="sex" value="1">男
        <input type="radio" v-model="sex" value="2">女
    </div>
    <div>
        <label>爱好：</label>
        <div style="display: inline;" v-for="h in hobbies">
            <input  type="checkbox" :value="h.id" v-model="hobby"/>{{h.name}}
        </div>
    </div>
    <div>
        <label>地区</label>
        <select v-model="selectedCity">
            <option value="">-- 请选择 --</option>
            <option v-for="c in city" :value="c.id">{{c.name}}</option>
        </select>
    </div>
    <div>
        <label>备注：</label>
        <textarea v-model="remark"></textarea>
    </div>
    <div>
        <input type="checkbox" v-model="flag">是否已阅读并同意协议
    </div>
    <div>
        <button @click="submit" :disabled="disabled">提交</button>
    </div>
</div>
var vm = new Vue({
​
    el: "#app",
​
    data: {
        uname: '',
        upwd:'',
        age:'',
        sex: 1,
​
        //用于通过v-for指令输出多选框列表
        hobbies:[
            {id: '1', name:'打游戏'},
            {id: '2', name:'编程'},
            {id: '3', name:'旅游'}
        ],
    
        /*
         * 用于通过v-model双向绑定,保存用户的选择。
         * 此处为多选，需要通过数组接收，否则无法
         * 正常接收复选框的值，且复选框的行为也不正常，
         * 可能出现要么全部被选择，要么全部被取消的情况
         */
        hobby:[],
​
        remark: null,
​
        //用于生成地区选择列表
        city:[
            {id:"1", name:"长沙"},
            {id:"1", name:"株洲"},
            {id:"1", name:"湘潭"}
        ],
​
        //用于保存用户选择的地区
        selectedCity: '',
​
        //是否同意协议,默认值为false
        flag:false,
​
        //提交按钮是否禁用,默认为true
        disabled: true
    },
​
    //监控flag属性,如果同意协议则将提交按钮
    //设置为可用,否则提交按钮为禁用状态
    watch: {
        flag: function(val) {
            if(val) {
                this.disabled = false;
            }else{
                this.disabled = true;
            }
        }
    },
​
    methods: {
        submit: function() {
            let data = {
                uname: this.uname,
                upwd: this.upwd,
                age:this.age,
                sex: this.sex,
                hobby: this.hobby,
                city: this.selectedCity,
                remark: this.remark
            }
            console.log(data);
        }
    }
​
});

不使用监视器的简单方式： 删除监听器，然后将提交按钮的做如下修改 使用表达式

<button @click="submit" :disabled="!flag">提交</button>

4.2 修饰符

修饰符作用
.lazy默认情况下， v-model在input事件中同步输入框的值与数据，但你可以添加一个修饰符lazy，从而转变为在change事件中同步
.number将用户的输入值转为 Number 类型
.trim自动过滤用户输入的首尾空格

以.number为例，示例修饰符的使用，将输入的年龄属性转换为数值型

<div>
    <label>年龄：</label>
    <input type="text" v-model.number="age" >
</div>

5. 自定义指令

Vue除支持内置的v-model/v-show等指令，还允许自定义指令。 vue2中，代码的复用和抽象的主要形式是组件，但在有些情况下仍然需要对普通dom元素做底层操作，这种情况下需要自定义指令。根据自定义指令的作用范围，可分为：全局、局部两种

钩子函数：

名称作用
bind只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
inserted被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
update所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)
componentUpdated指令所在组件的 VNode 及其子 VNode 全部更新后调用
unbind只调用一次，指令与元素解绑时调用

指令钩子函数会被传入以下参数：

  • el：指令所绑定的元素，可以用来直接操作 DOM 。

  • binding：一个对象，包含以下属性： 1） name：指令名，不包括 v- 前缀。 2） value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。 3） oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。 4） expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。 5） arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。 6） modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

  • vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。

  • oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

5.1 局部

通过自定义标签设置文字颜色

​

我是自定义指令

​

var vm = new Vue({
    el: '#app',
    data: {
        red:'red'
    },
    //自定义指令，局部
    directives:{
        color: {
            inserted: function(el,binding) {
                 console.log(el,binding);
                 el.style.color = binding.value;
            }
        }
    }
});

5.2 全局

​

我是自定义指令

​

//自定义标签,全局
Vue.directive('color', {
    inserted: function(el,binding) {
         console.log(el,binding);
         el.style.color = binding.value;
    }
})
​
var vm = new Vue({
    el: '#app',
    data: {
        red:'red'
    }
});

6. vue组件（重点）

6.1 组件介绍

  • 组件(Component)是Vue最强大的功能之一，

  • 组件可以扩展HTML元素，封装可重用的代码

  • 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

  • 组件可以分为全局组件和局部组件

组件命名规则

  • 短横线命名，如: my-component，vue推荐使用这种方式的命名规则

  • 首字母大写命名规则，如：MyComponent

props

  • props是父组件用来传递数据的一个自定义属性。

  • 父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 "prop"

6.2 局部组件

定义语法：new Vue({el:'#d1',components:{组件名：{配置选项}}})

​​

​
var vm = new Vue({
    el: '#app',
    data: {
        ts: new Date().getTime()
    },
​
    //局部自定义组件
    components: {
    
        //组件名: {配置项}
        'button-counter':  {
            
            //用来传值的自定义属性
            props:['title'],
​
            //模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
            template: '<button @click="doClick">{{title}}：局部组件，点击计数器:{{count}}</button>',
​
            //注意：在自定义的组件中需要使用函数来定义data
            data: function() {
                return {
                    count: 0
                }
            },
            
            //定义响应事件函数
            methods: {
                doClick: function() {
                    //注意此处this的作用返回是自定义组件,而不是上面声明
                    //的vue实例.
                    this.count++;
                }
            }
        }
    }
});

注：为什么在自定义组件中必须使用函数方式来什么data？ 每个自定义组件使用函数方式来声明data，这样每个实例可以维护一份被返回对象的独立的拷贝，在定义自定义组件时，一定要注意这一点。

6.3 全局组件

将上面的局部组件修改为全局组件。 全局组件定义语法：Vue.component(组件名, 配置选项)

​​

//全局组件
Vue.component('button-counter', {
​
    //用来传值的自定义属性
    props:['title'],
    
    //模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
    template: '<button @click="doClick">{{title}}: 全局组件，点击计数器:{{count}}</button>',
​
    //注意：在自定义的组件中需要使用函数来定义data
    data: function() {
        return {
            count: 0
        }
    },
    
    //定义响应事件函数
    methods: {
        doClick: function() {
            //注意此处this的作用返回是自定义组件,而不是上面声明
            //的vue实例.
            this.count++;
        }
    }
});
​
var vm = new Vue({
    el: '#app',
    data: {
        ts: new Date().getTime()
    }
});

使用方式

<div id="app">
			<div>
				<button-counter title="测试" @click-test="test" />
			</div>
		</div>

案例代码 组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/v2.6.10/vue.js"></script>
	</head>
	<body>

		<div id="app">
			<div>
				<button-counter title="测试" @click-test="test" />
			</div>
		</div>
		<script>
			/* Vue.component('button-counter',{
	props:['title'],
	template:'<button @click="doClick">{{title}}: 全局组件，点击计数器:{{count}}</button>',
	data: function() {
		return {
			count: 0
			
		}
	},
	methods:{
		doClick(){
			this.count++;
		}
	}
	
	
}) */

			/* var vm=new Vue({
				el:"#app",
				data:{
					
				}
			}) */


			var vm = new Vue({
				el: "#app",
				data: {

				},
				components: {
					'button-counter': {
                    props:['title'],
                    template:'<button @click="doClick">{{title}}: 全局组件，点击计数器:{{count}}</button>',
                    data: function() {
                    	return {
                    		count: 0
                    		
                    	}
                    },
                    methods:{
                    	doClick(){
                    		this.count++;
							//自定义事件
							this.$emit("click-test",this.count);
                    	}
                    }
					}
				},
				methods:{
					test(count01){
						console.log(count01)
					}
				}
			})
		</script>

	</body>
</html>

7. 自定义事件

Vue自定义事件是为组件间通信设计， vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定

  • 父Vue实例->子Vue实例，通过prop传递数据

  • 子Vue实例->父Vue实例，通过事件传递数据

7.1 子 -> 父

触发事件：$emit(eventName, 参数...) 注意：事件名必须用短横线命名方式。

<div id="app">
     <!--子组件到父组件-->
     <div>
         <button-counter v-on:click-test="clickTest"/>
     </div>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        ts: new Date().getTime()
    },
​
    //对于自定义的button-counter组件, Vue实例为父组件
    //在父组件中定义一个test方法,子组件调用该方法
    methods: {
        clickTest: function(msg) {
            console.log("test: "+ msg);
        }
    },
​
    //局部自定义组件
    components: {
​
        //组件名: {配置项}
        'button-counter':  {
​
            //用来传值的自定义属性
            props:['title'],
​
            //模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
            template: '<button @click="doClick">{{title}}：局部组件，计数:{{count}}</button>',
​
            //注意：在自定义的组件中需要使用函数来定义data
            data: function() {
                return {
                    count: 0
                }
            },
​
            //定义响应事件函数
            methods: {
                doClick: function() {
                    //注意此处this的作用返回是自定义组件,而不是上面声明的vue实例.
                    //注意事件名使用短横线命名方式
                    this.$emit("click-test","hello vue");
                }
            }
        }
    }
});

7.2 父 -> 子

注意：props定义属性时采用的是驼峰命名法，而在html中使用时需要对应的变为短横线命名法！！

<div id="app">
     <!--子组件到父组件-->
     <div>
             <!-- 注意此处将定义props时的驼峰命名法，变为了短横线命名法 !!! -->
             <button-counter title-desc="测试" />
     </div>
</div>
​
var vm = new Vue({
    el: '#app',
    data: {
        ts: new Date().getTime()
    },
​
    //对于自定义的button-counter组件, Vue实例为父组件
    //在父组件中定义一个test方法,子组件调用该方法
    methods: {
        clickTest: function(msg) {
            console.log("test: "+ msg);
        }
    },
​
    //局部自定义组件
    components: {
​
        //组件名: {配置项}
        'button-counter':  {
​
            //用来传值的自定义属性
            //注意此处使用驼峰命名法 !!!
            //上面定义 title-desc
            props:['titleDesc'],
​
            //模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
            template: '<button @click="doClick">{{titleDesc}}：局部组件，计数:{{count}}</button>',
​
            //注意：在自定义的组件中需要使用函数来定义data
            data: function() {
                return {
                    count: 0
                }
            },
​
            //定义响应事件函数
            methods: {
                doClick: function() {
                    //注意此处this的作用返回是自定义组件,而不是上面声明的vue实例.
                    //注意事件名使用短横线命名方式
                    this.count ++;
                    console.log(this.titleDesc);
                }
            }
        }
    }
});

演示效果

2.vue路由介绍与基本使用

  1. 命名法 驼峰式命名法(camelCase) 短横线命名(kebab-case)全小写 帕斯卡命名法(PascalCase)

  2. 文件夹命名 kebab-case 尽量使用名词，尽量使用一个单词

  3. *.js文件命名规范 3.1 所有模块的主文件index.js全小写 3.2 属于组件的.js文件，使用PascalBase风格 3.3 其他类型的.js文件，使用kebab-case风格

  4. *.vue文件命名规范 除index.vue之外，其他.vue文件统一用PascalBase风格

  5. *.less文件命名规范 统一使用kebab-case命名风格

前三点比较重要，需要记住

附录一：.less为后缀的文件是什么 1、less是什么：LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入）， 运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。 2、为什么有less：CSS 是一门非程序式语言，CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用 3、less最最最最最最简单实例：使用@符号来定义变量

2. SPA

2.1 SPA简介

单页Web应用（single page application，SPA），就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序

  • 单页面应用程序： 只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中

  • 传统多页面应用程序： 对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面

  • 优势 减少了请求体积，加快页面响应速度，降低了对服务器的压力 更好的用户体验，让用户在web app感受native app的流畅

2.2 SPA技术点

  • ajax

  • 锚点的使用（window.location.hash #）（页面内定位的技术）

  • hashchange 事件 window.addEventListener("hashchange",function () {}) hashchange事件是html5新增的api，用来监听浏览器链接的hash值变化。当URL的片段标识符更改时，将触发hashchange事件

3. 使用路由建立多视图单页应用

3.1 引入依赖库

建立一个基本html项目，创建一个demo页面并引入一下js库文件

  • <script src="js/vue.js"></script>

  • <script src="js/vue-router.min.js"></script>

js包下载与实例代码

vue4.zip - 蓝奏云

3.2 创建自定义组件

创建vue组件有两种方式：

  • var MyComonent = Vue.component("button-counter", {...}); 创建一个vue组件并赋给MyComponent变量

  • const Home = Vue.extend({}); extend是构造一个组件的语法器. 你给它参数，他给你一个组件,然后这个组件你可以作用到Vue.component这个全局注册方法里，也可以在任意vue模板里使用

相关知识点： js中const,var,let区别？分别写一个例子

创建一个Home组件和About组件

//组件名用PPascalCase风格
const Home = Vue.extend({
    //必须定义一个根元素作为容器,包裹模板中的内容元素
    template: '<div><h1>Home组件</h1><div>Home组件内容区</div></div>'
});
​
const About = Vue.extend({
    //必须定义一个根元素作为容器,包裹模板中的内容元素
    template: '<div><h1>About组件</h1><div>About组件内容区</div></div>'
});

3.3 创建路由

3.3.1 什么是路由

vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。 传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。 路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。

route和router的区别

  • route：路线

  • router：路由器

  • 路由器中包含了多个路线

3.3.2 定义路由

//定义路由，"/"代表根路径，路由中可以使用name属性，一遍情况不建议使用
var routes = [
    {path: '/home',component: Home},
    {path: '/about',component: About}
];
​
//创建路由器实例
const router = new VueRouter({
    routes: routes
});

3.4 创建和挂载根实例

使用路由后，Vue实例的创建于以前会有一定的区别，原来使用el属性指定边界，使用路由后需要使用Vue实例$mount方法挂载根实例

//创建和挂载根实例
var vm = new Vue({
    //el: '#app',
    //将路由放入vue实例
    router: router,
    data: {
        ts: new Date().getTime()
    }
}).$mount("#app");

3.5 使用RouterLink和RouterView组件导航与显示

<div>
    <router-link to="/home">go to Home</router-link>
    <router-link to="/about">go to aboue</router-link>
</div>
<div>
     <router-view></router-view>
</div>

<router-view></router-view>路由内容显示区域。

4. router-link相关属性

4.1 to

表示目标路由的链接

<router-link to="/home">Home</router-link><!-- 字符串-->

<router-link v-bind:to="'home'">Home</router-link><!-- 使用 v-bind 的 JS 表达式 -->

上面的示例已经使用，to既可以使用字符串，也可以使用js表达式

4.2 replace

设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。 样例：

<router-link :to="{ path: '/home'}" replace></router-link>

如果配置了replace，则在点击该链接，将会导致history记录被清空，不能再执行回退。

vue中导航中的后退-前进-编程式导航

  • this.$router.go(-1) ：代表着后退

  • this.$router.go(1)：代表着前进

  • 切换到path为/home的路由

this.$router.push({    
       path:'/home'
});
//或者使用path，推荐path
this.$router.push({    
       path:'/home'
});

示例一：编程式前进后退按键 1）在页面上加入前进和后退按钮，

<p>
    <button @click="previous">前进</button>
    <button @click="next">后退</button>
</p>

2）添加事件处理程序

methods: {
    //前进
    previous: function() {
        this.$router.go(1);
    },
    //后退
    next: function() {
        this.$router.go(-1);
    }
}

vue的 $ 除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开

示例二：切换到指定路由： 添加一个“回家”按钮。

<button @click="gotohome">回家</button>
gotohome: function() {
    console.log("go to home");
    this.$router.push({
        path: '/home'
    });
}

示例三，设置默认显示的组件 这个很简单，只要将需要默认显示的组件对应的路由的path设置为"/"即可

//定义路由表
var routes = [
    //默认显示home
    {path:'/', component:Home}, 
    {path:'/home', component:Home},
    {path:'/about', component:About}
];

示例四： 如果配置了replace，则在点击该链接，将会导致history记录被清空，不能再执行回退。 例如： 将

<router-link to="/home">Home</router-link>

加入replace属性，修改为：

<router-link to="/home" replace>Home</router-link>

通过测试可以看到，点击home后，history记录被清空。所以一般不用。

4.3 append

设置 append 属性后，则在当前 (相对) 路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b （路径追加）

<router-link :to="{ path: 'relative/path'}" append></router-link>

4.4 tag

<router-link>默认渲染为<a>标签，有时候想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。（如果不指定tag，默认渲染为a标签）

<router-link to="/foo" tag="li">foo</router-link>

<!-- 渲染结果 --> <li>foo</li>

4.5 active-class

设置链接激活时使用的 CSS 类名

4.6 exact-active-class

配置当链接被精确匹配的时候应该激活的class

4.7 event

声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

4.8路由转参

4.8.1 query传参

<router-link :to="{path:'/home',query:{name:123}}" tag="button" active-class="active" event="mouseover">go to Home</router-link>

接受参数

//组件名用PPascalCase风格
            const Home = Vue.extend({
                //必须定义一个根元素作为容器,包裹模板中的内容元素
                template: '<div><h1>Home组件</h1><div>Home组件内容区:参数：{{name}}</div></div>',
                data: function() {
                    return {
                        name: this.$route.query.name
                    }
                }
​
​
            });
​

4.8.2 params 方式传参 类似post 网页隐藏数据

<router-link :to="{name:'aboutname',params:{name:'xiaoheizi'}}" active-class="active">go to aboue</router-link>

注意：需要注意路由需要添加name 属性 与上方跳转要一致

            {
                    path: '/about',
                    component: About,
                    name: 'aboutname'
                }

获取参数

const About = Vue.extend({
                //必须定义一个根元素作为容器,包裹模板中的内容元素
                template: '<div><h1>About组件</h1><div>About组件内容区 参数：{{name}}</div></div>',
                data: function() {
                    return {
                        name: this.$route.params.name
                    }
                }
​
            });

4.8.3 props方式传参

test 时跳转组件 后面跟着的是参数 ！如多有多个 / 隔开

<router-link :to="{path:'/test/dfdf'}" tag="button" active-class="active">go to Home</router-link>

注意路由配置

// 后面 name 是参数名 必须写 如果name后面还有参数那么  /test/:name/:参数名
{
                    path: '/test/:name',
                    component: Test,
                    props: true
                }

组件中获取参数

const Test = Vue.extend({
            props: ['name'],
            //必须定义一个根元素作为容器,包裹模板中的内容元素
            template: '<div><h1>Test组件</h1><div>Test组件内容区 参数：{{name}}</div></div>',
​
        });

  1. props 第二种方式传参

<router-link :to="{path:'/test1',query:{name:'dfd',age:12}}" tag="button" active-class="active">go to Home</router-link>

路由注意获取参数

{
                    path: '/test1',
                    component: Test1,
                    props(route) {
                        return {
                            name: route.query.name,
                            age: route.query.age
                        }
                    }
                }

获取参数

const Test1 = Vue.extend({
                props: ['name', 'age'],
                //必须定义一个根元素作为容器,包裹模板中的内容元素
                template: '<div><h1>Test组件</h1><div>Test组件内容区 参数：{{name}}---{{age}}</div></div>',
​
            });

5.全部实例代码 ！

<!DOCTYPE html>
<html>
    <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></title>
        <script src="js/v2.6.10/vue.js"></script>
        <script src="js/vue-router.js"></script>
        <style>
        .active{
            color: pink
        }
        </style>
    </head>
    <body>
        <div id="app">
            <div>
                <router-link :to="{path:'/home',query:{name:123}}" tag="button" active-class="active" event="mouseover">go to Home</router-link>
                <router-link :to="{name:'aboutname',params:{name:'xiaoheizi'}}" active-class="active">go to aboue</router-link>
                <router-link :to="{path:'/test/dfdf'}" tag="button" active-class="active">go to Home</router-link>
                <router-link :to="{path:'/test1',query:{name:'dfd',age:12}}" tag="button" active-class="active">go to Home</router-link>
            </div>
            <div>
                <router-view></router-view>
            </div>
            <p>
                <button @click="previous">前进</button>
                <button @click="next">后退</button>
                <button @click="home">主页</button>
            </p>
        </div>
​
        <script>
            //组件名用PPascalCase风格
            const Home = Vue.extend({
                //必须定义一个根元素作为容器,包裹模板中的内容元素
                template: '<div><h1>Home组件</h1><div>Home组件内容区:参数：{{name}}</div></div>',
                data: function() {
                    return {
                        name: this.$route.query.name
                    }
                }
​
​
            });
​
            const About = Vue.extend({
                //必须定义一个根元素作为容器,包裹模板中的内容元素
                template: '<div><h1>About组件</h1><div>About组件内容区 参数：{{name}}</div></div>',
                data: function() {
                    return {
                        name: this.$route.params.name
                    }
                }
​
            });
​
​
            const Test = Vue.extend({
                props: ['name'],
                //必须定义一个根元素作为容器,包裹模板中的内容元素
                template: '<div><h1>Test组件</h1><div>Test组件内容区 参数：{{name}}</div></div>',
​
            });
            
            const Test1 = Vue.extend({
                props: ['name', 'age'],
                //必须定义一个根元素作为容器,包裹模板中的内容元素
                template: '<div><h1>Test组件</h1><div>Test组件内容区 参数：{{name}}---{{age}}</div></div>',
​
            });
​
​
​
            //定义路由表
            var routes = [{
                    path: '/',
                    component: Home
                },
                {
                    path: '/home',
                    component: Home
                },
                {
                    path: '/about',
                    component: About,
                    name: 'aboutname'
                },
                {
                    path: '/test/:name',
                    component: Test,
                    props: true
                },
​
                {
                    path: '/test1',
                    component: Test1,
                    props(route) {
                        return {
                            name: route.query.name,
                            age: route.query.age
                        }
                    }
                }
            ];
​
            //创建路由器实例
            const router = new VueRouter({
                routes: routes
            });
​
            var vm = new Vue({
                el: "#app",
                router: router,
                data: function() {
                    return {
​
                    }
                },
             methods:{
                   //前进
                     previous: function() {
                         this.$router.go(1);
                     },
                     //后退
                     next: function() {
                         this.$router.go(-1);
                     },
                     home(){
                         this.$router.push({
                             path:"/home"
                         })
                     }
             }
            });
        </script>
​
    </body>
</html>
​

嘴强程序员
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue路由
weixin_44557427的博客
08-24 404
一、Vue路由： 1. SPA是什么 单页Web应用（single page application，SPA），就是只有一个Web页面的应用， 是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序 单页面应用程序： 只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中 传统...
vue路由以及SPA技术的介绍
qq_62881798的博客
09-24 774
单页Web应用（single page application，SPA），就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序单页面应用程序：只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中传统多页面应用程序：对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面优势减少了请求体积，加快页面响应速度，降低了对服务器的压力。
网络安全技术-SPA单包认证技术
wangtd的博客
11-13 2198
单包认证（SPA）是一种网络安全技术，旨在通过单一加密数据包完成身份验证过程，从而提高安全性和效率。
0x00说说对SPA的理解？
bruscar的专栏
10-09 375
概览 0x00 定义： SPA：（single-page-application） : 一种网络应用程序或网站的模型。 通过动态重写当前页面来与用户交互; 避免了页面之间切换打断用户体验； 所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面，页面在任何时间点都不会重新请求加载，即为： 容器没变，变的是内容。 区分【别混淆】： SPA： 【Single-Page application】单页面应用，就是一
tts-vue-1.9.0 语音合成
05-23
1. **Vue.js基础** - **组件化开发**：Vue.js的核心理念是组件，每个UI部分都可以被封装为一个独立的组件，便于复用和维护。 - **模板语法**：Vue.js使用HTML-like的模板语法，允许开发者声明式地将数据绑定到DOM...
big-screen-vue-master
03-10
而前端框架一词可能指的是除了Vue.js之外，还可能运用了Vuex进行状态管理，或者采用Vue Router进行页面路由，以实现更复杂的应用结构。 在实际操作中，开发者可能需要完成以下步骤来使用这个项目： 1. 环境准备：...
petite-vue-main.zip
07-16
通过这个"正版上手demo"，你将能够深入理解Petite Vue的基本概念和工作方式，为将来使用Vue 3或Petite Vue开发更复杂的应用打下坚实的基础。同时，这也是一个很好的实践平台，让你可以动手尝试和调试代码，提升自己...
09-vue2基础课件.zip
07-13
这个"09-vue2基础课件.zip"压缩包文件很可能是包含了一系列教程或课程材料，帮助学习者掌握Vue 2的基础知识。以下是关于Vue 2的一些关键知识点： 1. **安装与设置**：Vue 2可以通过CDN链接直接在HTML中引入，也可以...
el-vueDemo:vue个人练习项目
03-30
下面将详细介绍Vue.js的基础知识和在"el-vueDemo"项目中的应用。 1. **Vue实例和组件化** - Vue实例是Vue框架的核心，通过`new Vue()`创建。在"el-vueDemo"中，作者可能创建了一个或多个Vue实例来组织页面的各个...
Vue基础知识.pptx
03-24
Vue是一种流行的前端框架，这个PPT旨在帮助面试者加深对于Vue的基本概念和原理的了解。在数据绑定方面，可以介绍Vue的单向数据流和双向数据绑定的概念，并应用在实际的代码场景中。在组件方面，可以解释组件的定义和使用方法，并结合示例代码演示Vue组件的各种应用场景。在指令方面，可以介绍指令的作用和常见的指令类型，并结合代码实例讲解Vue指令在页面中的使用方法和实际应用案例。总之，这个PPT将涵盖Vue面试中重要的基础知识，帮助面试者有效准备面试。
SPA和SFC
qq_20086467的博客
03-01 381
2.局部刷新，用户每次访问别的功能，实际上是我们做的路由的跳转，而不是让用户访问一个全新的页面，这样不会让用户有较长的等待时间。3.前后端分离式的开发，前端程序员只需要关心页面上的功能，逻辑以及和后端的交互，后端也可以更专心的完成自己的业务。1.每个页面都是一个组件，将三个巨大的层（html，css，js）分成了很多个小组件和模块去完成，就像搭积木一样，大化小。1.因为是单页面，所以对于SEO的搜索不够友好，不像多页面应用，每个页面都能被搜索引擎抓取到。（😀）单页面应用对应的是多页面应用，SPA的优点有，
Vue.js实战：构建现代单页应用程序（SPA）的实用指南
明飞的博客
12-23 3358
单页应用程序是一种Web应用程序或网站，通过动态加载所有相关的代码，使用户在浏览过程中感受不到页面的重新加载。通常，SPA使用Ajax、WebSocket等技术在后台与服务器进行数据交互，实现异步加载内容，提供更流畅的用户体验。Vue.js是一套用于构建用户界面的渐进式JavaScript框架。它专注于视图层，易于集成到其他库或现有项目中。Vue.js的核心库只关注视图层，非常容易学习，同时它也完全可驱动整个单页应用。Vue.js的核心是Vue实例，是Vue应用的入口。
vue中关于SPA单页面的使用场景和优缺点（都在这了）
最新发布
贫僧法号依平
04-13 1322
SPA（single-page application），翻译过来就是单页应用SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验在单页应用中，所有必要的代码（HTMLJavaScript和CSS。
【vue】vue中如何实现SPA 单页面应用_09
青春木鱼的博客
06-21 4076
SPA（ single page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。所以，基于以上特性，对单页应用来说模块化的开发和设计显得相当重要。..................
vue-spa
weixin_46202648的博客
11-17 1050
Vue全家桶 课程目标： 1 能够说出Vue全家桶的各个组件(Vue-CLI、Vue-Router、Vuex、Axios)的概念、功能和使用场景 2 能够使用Vue全家桶进行项目开发 0 前置知识-ES6模块化 0.1 目标 能够说出模块化的概念 能够使用export关键字和import关键字 0.2 路径 什么是模块化 export关键字的用法 import关键字的用法 备注：此处的代码暂时无法执行，待本章课程内容学习完，就可以运行 0.3 体验 0.1.1 什么是模块化 模块化就是把代码进行拆分
SPA的原理及其实现
weixin_50957354的博客
12-01 3019
SPA即单页应用的原理及其实现。
Vue 使用vue-cli构建SPA项目（超详细）
m0_73647713的博客
09-21 687
#app {
Vue之SPA
weixin_45111741的博客
09-19 2594
SPA1. SPA是什么2.路由思路2.1 、确保引入Vue.vue-router的js依赖2.2、首先 创建自定义组件2.3、需要将不同的组件放入一个容器中（路由集合）2.4、将路由集合组装成路由器2.5、将路由挂载到Vue实例中2.6、跳转replace 1. SPA是什么 单页Web应用（single page application，SPA），就是只有一个Web页面的应用， 是加载单个HT...
Vue2基础教程：简单易懂的前端开发框架
"Vue2 基础教学文档-旨意为简单易懂" Vue.js，简称Vue，是一个轻量级的、渐进式的JavaScript框架，由尤雨溪开发，其核心理念是通过简单的API实现数据绑定和组合视图组件，以提高Web前端开发的效率。Vue的设计使得它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值