vue学习--前端路由(二、Vue Router基本使用)

2 Vue Router

Vue Router（官网：https://router.vuejs.org/zh/）是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，可以非常方便的用于SPA应用程序的开发.

Vue Router功能：

支持HTML5 历史模式或 hash 模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路

2.1 基本使用步骤

引入相关的库文件
添加路由链接
添加路由填充位
定义路由组件
配置路由规则并创建路由实例
把路由挂载到 Vue 根实例中

2.2 引入相关的库文件

2.3 添加路由链接

<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>

2.4 添加路由填充位

<router-view></router-view>

2.5 定义路由组件

   var User = { 
     template: '<div>User</div>' 
  } 
  var Register = { 
     template: '<div>Register</div>' 
  }

2.6 配置路由规则并创建路由实例

 // 创建路由实例对象     
var router = new VueRouter({     
  // routes 是路由规则数组     
  routes: [       
   // 每个路由规则都是一个配置对象，其中至少包含 path 和 component 两个属性：       
   // path 表示当前路由规则匹配的 hash 地址       
   // component 表示当前路由规则对应要展示的组件       
   {path:'/user',component: User}, 
   {path:'/register',component: Register} 
  ] 
})

2.7 把路由挂载到 Vue 根实例中

   new Vue({ 
     el: '#app',      // 为了能够让路由规则生效，必须把路由对象挂载到 vue 实例对象上      router 
  });

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user">User</router-link>
      <router-link to="/register">Register</router-link>
 
      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>
 
    <script>
      const User = {
        template: '<h1>User 组件</h1>'
      }
 
      const Register = {
        template: '<h1>Register 组件</h1>'
      }
 
      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/user', component: User },
          { path: '/register', component: Register }
        ]
      })
 
      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>
</html>

2.8 路由重定向

路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面；通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：

  var router = new VueRouter({ 
    routes: [       
    // 其中，path 表示需要被重定向的原地址，redirect 表示将要被重定向到的新地址          {path:'/', redirect: '/user'}, 
    {path:'/user',component: User}, 
    {path:'/register',component: Register} 
    ] 
  })

posted @ 2020-04-19 22:15 一纸年华阅读(15) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· vue学习--前端路由(三、Vue Router嵌套路由)

· vue学习--前端路由(五、Vue Router命名路由 )

· Vue Router

· Vue Router的使用步骤(★★★)

· 路由--基础入门

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）

历史上的今天：
2018-04-19 反射：获取Class对象的三种方式

公告

潜藏于波涛下寂静无声

跃升于惊涛上乘风化龙...猫

昵称：一纸年华
园龄： 6年11个月
粉丝： 12
关注： 14

+加关注

2025年3月

日

一

二

三

四

五

六

一纸年华

潜藏于波涛下寂静无声，跃升于惊涛上乘风化龙

vue学习--前端路由(二、Vue Router基本使用)

2 Vue Router

2.1 基本使用步骤

2.2 引入相关的库文件

2.3 添加路由链接

2.4 添加路由填充位

2.5 定义路由组件

2.6 配置路由规则并创建路由实例

2.7 把路由挂载到 Vue 根实例中

2.8 路由重定向

公告

潜藏于波涛下寂静无声

跃升于惊涛上乘风化龙...猫

搜索

常用链接

我的标签

合集 (5)

随笔分类 (230)

随笔档案 (229)

相册 (12)

阅读排行榜

评论排行榜

最新评论

目录导航

	var User = {
	template: '<div>User</div>'
	}
	var Register = {
	template: '<div>Register</div>'
	}

	// 创建路由实例对象
	var router = new VueRouter({
	// routes 是路由规则数组
	routes: [
	// 每个路由规则都是一个配置对象，其中至少包含 path 和 component 两个属性：
	// path 表示当前路由规则匹配的 hash 地址
	// component 表示当前路由规则对应要展示的组件
	{path:'/user',component: User},
	{path:'/register',component: Register}
	]
	})

	new Vue({
	el: '#app', // 为了能够让路由规则生效，必须把路由对象挂载到 vue 实例对象上 router
	});

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<!-- 导入 vue 文件 -->
	<script src="./lib/vue_2.5.22.js"></script>
	<script src="./lib/vue-router_3.0.2.js"></script>
	</head>
	<body>
	<!-- 被 vm 实例所控制的区域 -->
	<div id="app">
	<router-link to="/user">User</router-link>
	<router-link to="/register">Register</router-link>

	<!-- 路由占位符 -->
	<router-view></router-view>
	</div>

	<script>
	const User = {
	template: '<h1>User 组件</h1>'
	}

	const Register = {
	template: '<h1>Register 组件</h1>'
	}

	// 创建路由实例对象
	const router = new VueRouter({
	// 所有的路由规则
	routes: [
	{ path: '/user', component: User },
	{ path: '/register', component: Register }
	]
	})

	// 创建 vm 实例对象
	const vm = new Vue({
	// 指定控制的区域
	el: '#app',
	data: {},
	// 挂载路由实例对象
	// router: router
	router
	})
	</script>
	</body>
	</html>

	var router = new VueRouter({
	routes: [
	// 其中，path 表示需要被重定向的原地址，redirect 表示将要被重定向到的新地址 {path:'/', redirect: '/user'},
	{path:'/user',component: User},
	{path:'/register',component: Register}
	]
	})