vue路由

最新推荐文章于 2024-07-05 15:05:21 发布

无感_K

最新推荐文章于 2024-07-05 15:05:21 发布

阅读量108

点赞数

分类专栏： vue 笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_55966394/article/details/121106986

版权

笔记同时被 2 个专栏收录

54 篇文章 0 订阅

订阅专栏

vue

10 篇文章 0 订阅

订阅专栏

路由是构成Vue的SPA模式的重要组成部分，今天主要学习怎么使用基本的路由进行单页面开发。

准备工作：

导入vue以及vue_router库

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>

类似的库或框架依赖在BootCDN中找，如果找错了，可能会出现什么什么未定义

（is not defined）

1.组件定义

单页面开发的核心要素是通过改变锚点展示不同组件

组件：

        const Home = Vue.extend({
			template: '<div><p>这是一个Home组件</p><div>Home组件内容</div></div>'
		});

		const Abort = Vue.extend({
			template: '<div><p>这是一个Abort组件</p><div>Abort组件内容</div></div>'
		});

注：1.const是es6中申明对象的关键字，与js中var关键字相似，另外es6中申明变量用let

2.Vue.extend({});也是定义组件的一种方式，这里用之前的Vue.component('组件名',{内容})，也可以。

2.定义路由

        let routess = [
			{
			path:'/',
			component:Home
		}, {
			path:'/index',
			component:Home
		},{
			path:'/abort',
			component:Abort
		}];

path填访问路劲，component填组件名称，这里的变量名随便取，也就是routess。

这是json数组的形式，可以根据需求填别的，这只写三个，做例子。

3.组装路由器

定义好路由之后，将其组装到路由器中

const router = new VueRouter({
			routes:routess
		});

4.将路由器挂载到Vue实例

在es6中，支持

new Vue({
			el: '#dd',
			router
		})

5.定义锚点

确定组件内容展示位置

<router-view></router-view>

6.连接到锚点

<router-link to = "/">首页</router-link>
<router-link to = "/abort">关于我们</router-link>

注意：锚点和连接点都只能在对应挂载的实例内

整体效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
	</head>
	<body>
		<div id="dd">
			<router-link to = "/">首页</router-link>
			<router-link to = "/abort">关于我们</router-link>
			<router-view></router-view>
		</div>
	</body>
	

	<script type="text/javascript">
		const Home = Vue.extend({
			template: '<div><p>这是一个Home组件</p><div>Home组件内容</div></div>'
		});

		const Abort = Vue.extend({
			template: '<div><p>这是一个Abort组件</p><div>Abort组件内容</div></div>'
		});
		//定义路由
		let routess = [
			{
			path:'/',
			component:Home
		}, {
			path:'/index',
			component:Home
		},{
			path:'/abort',
			component:Abort
		}];
		//路由器，放路由
		const router = new VueRouter({
			routes:routess
		});
		new Vue({
			el: '#dd',
			router
		})
	</script>
</html>

组件切换非常快，比之前Easyui中的tabs控件快了亿点点。这也是SPA开发的优点体现。

另外，在router-link上有很多属性

router-link相关属性

1 to
表示目标路由的链接
<router-link to="/home">Home</router-link>
<router-link v-bind:to="'home'">Home</router-link>

2 replace
设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。（无痕浏览）
<router-link :to="{ path: '/home'}" replace></router-link>

vue中导航中的后退-前进-编程式导航
this.$router.go(-1) ：代表着后退
this.$router.go(1)：代表着前进
this.$router.push({ 切换到name为home的路由
name:'home'
});

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

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

4 有时候想要 <router-link> 渲染成某种标签，例如 <li>。于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航
<router-link to="/foo" tag="li">foo</router-link>

<li>foo</li>

5 active-class
设置链接激活时使用的 CSS 类名。可以通过以下代码来替代

6 exact-active-class
配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代。

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

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