Vue路由切换的两种方式示例详解
作者：千梦、流羽
这篇文章主要介绍了Vue路由切换的两种方式,主要包括标签切换和js切换，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下
Vue路由切换的两种方式
1. 标签切换
1.1 <a>标签切换
语法：<a href=“# + 路由路径”>标签内容</a>
例子：
路由规则为：
const router = new VueRouter({
//路由对象数组
routes: [{
path: '/login',
component: login,
name: 'Login'
},
{
path: '/register',
component: register,
name: 'Register'
}
]
})使用 a 标签：
<!-- 使用a标签切换路由 --> <h2>使用a标签切换路由</h2> <a href="#/login" rel="external nofollow" rel="external nofollow" >切换登录界面</a> <a href="#/register" rel="external nofollow" rel="external nofollow" >切换注册界面</a>
运行结果：
点击 切换注册界面：
1.2 路径切换
语法：<router-link to=“路由路径”></router-link>
举例：
路由规则为：
const router = new VueRouter({
//路由对象数组
routes: [{
path: '/login',
component: login,
name: 'Login'
},
{
path: '/register',
component: register,
name: 'Register'
}
]
})使用路径切换：
<h2>根据路径切换路由（简写）</h2> <router-link to="/login">切换登录界面</router-link> <router-link to="/register">切换注册界面</router-link>
1.3 path切换
path切换是路径切换的完整写法：
语法：<router-link :to=“{path:路由路径}”></router-link>
:to 是 v-bind:to 的简写。
举例：
路由规则为：
const router = new VueRouter({
//路由对象数组
routes: [{
path: '/login',
component: login,
name: 'Login'
},
{
path: '/register',
component: register,
name: 'Register'
}
]
})使用 path 切换：
<h2>根据path切换路由（完整）</h2>
<router-link :to="{path:'/login'}">切换登录界面</router-link>
<router-link :to="{path:'/register'}">切换注册界面</router-link>1.4 name切换(推荐)
语法：<router-link :to=“{name:路由名称}”></router-link>
:to 为 v-bind:to 的简写
举例：
路由规则为：
const router = new VueRouter({
//路由对象数组
routes: [{
path: '/login',
component: login,
name: 'Login'
},
{
path: '/register',
component: register,
name: 'Register'
}
]
})使用name切换：
<h2>根据name属性切换路由(推荐，name属性不常改变，耦合度最小)</h2>
<router-link :to="{name:'Login'}">切换登录界面</router-link>
<router-link :to="{name:'Register'}">切换注册界面</router-link>2. js切换
使用路由后，在 vue 中有两个对象：
- this.$route ——当前路由对象，即 当前页面路径所对应的路由对象；
- this.$router——路由管理对象，即 VueRouter；
在 js 切换中语法为：
this.$router.push(
切换方式
)
路径切换：
login: function () {
this.$router.push('/login');
}path切换：
login: function () {
this.$router.push({
path:'/login', // path切换
});
}name切换：
login: function () {
this.$router.push({
name: 'Login' //name切换
});
}完整测试代码
<!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>路由切换的两种方式</title>
</head>
<body>
<div id="app">
<!-- 1. 通过标签切换 -->
<!-- 使用a标签切换路由 -->
<h2>使用a标签切换路由</h2>
<a href="#/login" rel="external nofollow" rel="external nofollow" >切换登录界面</a>
<a href="#/register" rel="external nofollow" rel="external nofollow" >切换注册界面</a>
<!-- 根据路径切换路由（简写） -->
<h2>根据路径切换路由（简写）</h2>
<router-link to="/login">切换登录界面</router-link>
<router-link to="/register">切换注册界面</router-link>
<!-- 根据path切换路由（完整） -->
<h2>根据path切换路由（完整）</h2>
<router-link :to="{path:'/login'}">切换登录界面</router-link>
<router-link :to="{path:'/register'}">切换注册界面</router-link>
<!-- 根据name属性切换路由（推荐，name属性不常改变，耦合度最小 -->
<h2>根据name属性切换路由(推荐，name属性不常改变，耦合度最小)</h2>
<router-link :to="{name:'Login'}">切换登录界面</router-link>
<router-link :to="{name:'Register'}">切换注册界面</router-link>
<!-- 2. 在js代码中切换路由 -->
<!-- <button @click="login">登录界面</button>
<button @click="register">注册界面</button> -->
<!-- 选择的组件会在这里生成 -->
<router-view></router-view>
</div>
</body>
</html>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"></script>
<script>
// 创建login组件
const login = {
template: `<h2>登录界面</h2>`
}
// 创建register组件
const register = {
template: `<h2>注册界面</h2>`
}
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(to) {
return VueRouterPush.call(this, to).catch(err => err)
}
// 1. 创建路由规则对象
const router = new VueRouter({
//路由对象数组
routes: [{
path: '/login',
component: login,
name: 'Login'
},
{
path: '/register',
component: register,
name: 'Register'
}
]
})
const app = new Vue({
el: '#app',
data: {
msg: "切换路由"
},
methods: {
login: function () {
// this.$route-object：当前路由对象——当前路径地址对应的路由
// this.$router-VueRouter：路由管理对象——VueRouter
// js中切换也是三种方式：路径切换，path切换，name切换
this.$router.push({
name: 'Login'
});
},
register: function () {
this.$router.push({
name: 'Register'
});
}
},
// 2. 注册路由对象
router,
})
</script>
到此这篇关于Vue路由切换的两种方式的文章就介绍到这了,更多相关Vue路由切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！