Vue的路由
通常搭配component使用
【1】Vue中路由router的基本使用
定义：vue router 是vue js 官方路由管理器，它和vue.js的核心深度集成，让构建单页面应用变得易如反掌
通过使用vue Router 可以将现有的Vue开发变得更加灵活，他可以根据前端请求的url不同对应在页面中展示不同的组件
先配置一个路由规则
组件先交给路由管理
a、下载 vue router js 并在页面中引用
b、创建路由规则并注册
const router = new VueRouter({}) ------------------------ 创建路由规则对象
path: '/login', //path代表路由路径
component: login //component代表路由路径对应的组件
redirect : ' ' // 代表路由重定向
path : ' * ' //通配符匹配任意路由c、在页面展示路由组件
<div id="app">
<div>{
{msg}}</div>
<!-- 显示路由的标签 -->
<a href="#/login">用户登录</a>
<a href="#/reg">用户注册</a>
<router-view></router-view>
</div>
d、添加切换路由的连接
path: '/login', //path代表路由路径
component: login //component代表路由路径对应的组件#/ ---------------------------------哈希路由
路由重定向： redirect : ' '
【2】Vue中路由切换的两种方式
（1）通过标签形式切换路由 ------------------------------使用router-link切换路由
<body>
<div id="app">
<h1>{
{msg}}</h1>
<!-- 路径切换路由:根据路由对象的路径切换路由显示不同的组件 -->
<!-- a标签切换路由 （最简单）-->
<a href="#/login">用户登录</a>
<a href="#/register">用户注册</a>
<!-- link 切换路由的标签 (类似a标签) 标签上必须加入to属性 to="路由路径"-->
<router-link to="/login">用户登录</router-link>
<router-link to="/register">用户注册</router-link>
<!-- 切换路由标签 -->
<router-link :to="{path:'/login'}">用户登录</router-link>
<router-link :to="{path:'/register'}">用户注册</router-link>
<!-- 名称切换路由：根据路由对象的名称切换路由显示不同的组件 -->
<!-- 根据名称切路由只能使用router-link 推荐使用命名路由-->
<router-link :to="{name:'Login'}">用户登录</router-link>
<router-link :to="{name:'Register'}">用户注册</router-link>
<!-- 展示路由组件标签 -->
<router-view></router-view>
</div>
</body>推荐使用命名路由
<script src="../../js/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
<script>
// 登录组件
const login = {
template: `<div><h1>用户登录</h1></div>`
};
//注册组件
const register = {
template: `<div><h1>用户注册</h1></div>`
};
//创建路由规则对象
var router = new VueRouter({
//定义路由规则
routes: [{
//name:代表路由对象名称 用来给路由对象一个唯一名称标识
path: '/login',
component: login,
name: 'Login'
}, {
path: '/register',
component: register,
name: 'Register'
}]
})
const app = new Vue({
el: "#app",
data: {
msg: "vue router 基本使用之使用 router-link 切换路由"
},
//注册路由对象
router,
})
</script>(2) 通过 js 代码形式切换路由
this.$route object ---- 当前路由对象 this.$router vueRouter --- 路由管理器对象
在vue路由中，多次切换同一个路由存在的问题
1、在vue中多次切换相同路由会出现错误。
解决方案：
a、第一种：每次切换路由之前手动判断
if(this.$route != 'Login'){
this.$router.push({path:'Login'});
}
b、在创建路由规则对象之后加入以下配置
this.$router.push("/location").catch((err) => { console.log(err); });
<body>
<div id="app">
<h1>{
{msg}}</h1>
<button @click="login">用户登录</button>
<button @click="register">用户注册</button>
<!-- 展示路由组件标签 -->
<router-view></router-view>
</div>
</body>
<script src="../../js/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
<script>
const login = {
template: `<div><h1>用户登录</h1></div>`
};
const register = {
template: `<div><h1>用户注册</h1></div>`
};
//创建路由规则对象
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: "使用 js 代码的形式切换路由"
},
methods: {
login() {
//发送axios请求完成登录 响应回来之后切换路由到主页
//this.$route object ---- 当前路由对象 this.$router vueRouter --- 路由管理器对象
console.log(this)
// 使用路由器对象切换
this.$router.push('/login'); //切换路由 （根据路径切换或者根据名字切换）
this.$router.push({
path: '/login'
});
this.$router.push({
name: 'Login'
}); //使用名称切换
},
register() {
this.$router.push({
name: 'Register'
}); //使用名称切换
}
},
//注册路由对象
router,
})
</script>【3】Vue router 基本使用之参数传递
地址栏传递参数分为两种方式：
第一种：queryString ? ----------- 使用 this.$router.query.key 接收
第二种：restful 路径传递参数 ---------- / XX / 21 使用 this.$router.params.key 接收
<body>
<div id="app">
<h1>{
{msg}}</h1>
<!-- [1] queryString 传参 -->
<router-link :to="{path:'/login?name=小小&password=123'}">用户登录</router-link>
<router-link :to="{path:'/register'}">用户登录</router-link>
<!-- 展示路由组件标签 -->
<router-view></router-view>
</div>
</body>
<script src="../../js/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
<script>
const login = {
template: `<div><h1>用户登录</h1></div>`,
created() {
console.log("created");
console.log(this.$route); //获取当前路由对象
console.log(this.$route.query.name); //获取当前路由对象
console.log(this.$route.query.password); //获取当前路由对象
}
};
const register = {
template: `<div><h1>用户注册</h1></div>`
};
const router = new VueRouter({
routes: [{
path: '/login',
component: login,
name: 'Login'
}, {
//[2] request 路径传参
path: '/register/:id/:name',
component: register,
name: 'Register'
}]
});
const app = new Vue({
el: "#app",
data: {
msg: "vue router 基本使用之参数传递"
},
router,
})
</script>