Vue路由(vue-router)使用

Vue路由使用教程

Vue 路由(vue-router) 是用来切换 Vue 组件的，在使用之前首先我们需要引入 vue-router 路由模块。

Vue路由详解

首先，我们需要创建 Vue 路由(vue-router) 对象，在路由对象上面配置路由规则。接着，我们需要将创建的 Vue 路由(vue-router) 对象挂载到 Vue 实例上。

最后，我们需要使用 Vue 路由(vue-router) 的占位符来切换 Vue 组件。

vue-router使用步骤

引入 vue-router 路由模块

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

创建路由对象，设置路由规则。

var routerObj = new VueRouter({
    routes: [ //路由匹配规则
        //每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性
        //属性1 是 path 表示监听哪个路由连接地址
        //属性2 是 component，表示，如果路由是有前面匹配到的path，则展示 component
        //注意 component 必须是组件的模板对象，不能是组件的引用名称
        {path: "/login", component: login},
        {path: "/register", component: register}
    ]
})

将路由对象，注册到 Vue 实例。

var vm = new Vue({
    el : '#app',
    router: routerObj //将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
});

使用 vue-router 的占位符来切换 Vue 组件。

<div id="app">
    <!-- 这是vue-router提供的元素，专门用来当做占位符的，将来路由规则匹配到的组件，就会展示到 router-view 中去 -->
    <router-view></router-view>
</div>

案例

创建Vue路由(vue-router)

使用 Vue 路由(vue-router)共分为四个步骤

<!DOCTYPE html>
<html>
<head>
	<title>Vue路由(vue-router)</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
	<!-- 1. 引入 vue-router 路由模块 -->
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
	<div id="app">
		<a href="#/login">登录</a>
		<a href="#/register">注册</a>
		<!-- 4. 这是vue-router提供的元素，专门用来当做占位符的，将来路由规则匹配到的组件，就会展示到 router-view 中去 -->
		<router-view></router-view>
	</div>
    <p>嗨客网（www.haicoder.net）</p>
</body>
<script type="text/javascript">
	var login = {
		template: '<h1>登录组件</h1>'
	}
	var register = {
		template: '<h1>注册组件</h1>'
	}
	// 2. 创建一个路由对象，当导入 vue-router 包之后，在 Window 全局对象中，就有了一个 路由的构造函数，叫做 VueRouter
	// 在 new 路由对象的时候，可以为 构造函数，传递一个配置对象
	var routerObj = new VueRouter({
		// route //这个配置对象中的 route 表示路由匹配规则
		routes: [ //路由匹配规则
			//每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性
			//属性1 是 path 表示监听哪个路由连接地址
			//属性2 是 component，表示，如果路由是有前面匹配到的path，则展示 component
			//注意 component 必须是组件的模板对象，不能是组件的引用名称
			{path: "/login", component: login},
			{path: "/register", component: register}
		]
	})
	var vm = new Vue({
        el : '#app',
        data:{
        	msg: "嗨客网"
        },
        router: routerObj //3. 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
    });
</script>
</html>

程序运行后，浏览器显示效果如下：

01 vue router.png

首先我们使用 script 标签使用 CDN 的方式引入 vue-router 路由模块。接着，我们使用 new VueRouter 创建一个 vue-router 路由对象，在 vue-router 路由对象里面的 routes 属性上，设置具体的路由规则。

vue-router 路由对象里面的 routes 属性里面的 path 就是我们需要访问的路由路径，component 对应的是组件的模板对象，而不是组件的引用名称。

接下来，我们使用 Vue 实例上的 router 属性，将创建的 vue-router 路由对象挂载到 Vue 实例上。再次，我们使用 router-view 标签来使用 vue-router 的占位符。

最后，我们使用超链接来实现切换路由从而实现切换组件的效果，这里的超链接必须是以 # 号开始。

Vue路由(vue-router)总结

Vue 路由(vue-router) 是用来切换 Vue 组件的，在使用之前首先我们需要引入 vue-router 路由模块。接着，我们需要创建 Vue 路由(vue-router) 对象，在路由对象上面配置路由规则。

接着，我们需要将创建的 Vue 路由(vue-router) 对象挂载到 Vue 实例上。最后，我们需要使用 Vue 路由(vue-router) 的占位符来切换 Vue 组件。