Vue路由基础
Vue属于单页应用（SPA），即整个应用程序中只有一个html页面。
在单页应用中（SPA），由于只是更改DOM来模拟多页面，所以页面浏览历史记录的功能就丧失了。此时，就需要前端路由来实现浏览历史记录的功能。
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/home">home</router-link>
<router-link to="/news">news</router-link>
<router-view></router-view>
</div>
<script>
const Home = {
template: '<div>首页</div>'
}
const News = {
template: '<div>新闻</div>'
}
var router = new VueRouter({
// mode: 'hash',
mode: 'history',
routes: [{
path: '/home',
component: Home
}, {
path: '/news',
component: News
}]
});
var vm = new Vue({
el: '#app',
data: {},
// 将路由添加到Vue中
router,
});
</script>
</body>
</html>
效果截图：
点击home时：
点击new时：
嵌套路由
实际应用界面，通常由多层嵌套的组件组合而成。 比如，我们 “新闻”组件中，还嵌套着 “国内”和 “国际”组件，那么URL对应就是/news/guonei和/news/guoji。
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<p>
<!-- 使用 router-link 组件来导航. to属性指定导航地址-->
<router-link to="/home">home</router-link>
<router-link to="/news">news</router-link>
</p>
<!-- 路由出口（路由匹配到的组件将渲染在这里） -->
<router-view></router-view>
</div>
<script>
// 1. 定义（路由）组件。
const Home = {
template: `<div>首页</div>`
}
const News = {
template: `<div>
<p>
<router-link to="/news/guonei">国内新闻</router-link>
<router-link to="/news/guoji">国际新闻</router-link>
</p>
<router-view></router-view>
</div>`
}
const GuoNeiNews = {
template: `<div>这里显示国内新闻</div>`
}
const GuoJiNews = {
template: `<div>这里显示国际新闻。。。。</div>`
}
// 2. 定义路由规则对象（每个路由应该映射一个组件）
const routes = [{
path: '/home',
component: Home,
}, {
path: '/news',
component: News,
children: [{
path: '/news/guonei',
component: GuoNeiNews
}, {
path: '/news/guoji',
component: GuoJiNews
}
]
},
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
//如果路由规则对象名也为routes，那么就可以简写为 routes
routes: routes
})
var vm = new Vue({
el: '#app',
data: {},
// 将路由添加到Vue中
router,
});
</script>
</body>
</html>
效果动图：
路由重定向
路由重定向表示将你原来在转发列表中发向一台路由的路径改成另外一条路径，也就相当于让你的数据走另外一条路到服务器。
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<p>
<!-- 使用 router-link 组件来导航. to属性指定导航地址-->
<router-link to="/home">home</router-link>
<router-link to="/news">news</router-link>
</p>
<!-- 路由出口（路由匹配到的组件将渲染在这里） -->
<router-view></router-view>
</div>
<script>
// 1. 定义（路由）组件。
const Home = {
template: `<div>首页</div>`
}
const News = {
template: `<div>
<p>
<router-link to="/news/guonei">国内新闻</router-link>
<router-link to="/news/guoji">国际新闻</router-link>
</p>
<router-view></router-view>
</div>`
}
const GuoNeiNews = {
template: `<div>这里显示国内新闻</div>`
}
const GuoJiNews = {
template: `<div>这里显示国际新闻。。。。</div>`
}
// 2. 定义路由规则对象（每个路由应该映射一个组件）
const routes = [
/* {
path:'/',
redirect:'/home'
}, */
{
path: '/',
redirect: {
name: 'MyHome'
}
},
{
path: '/home',
name: 'MyHome',
component: Home,
}, {
path: '/news',
component: News,
children: [{
path: '/news/guonei',
component: GuoNeiNews
}, {
path: '/news/guoji',
component: GuoJiNews
}
]
},
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
//如果路由规则对象名也为routes，那么就可以简写为 routes
routes: routes
})
var vm = new Vue({
el: '#app',
data: {},
// 将路由添加到Vue中
router,
});
</script>
</body>
</html>
当我们访问
#/时会自动帮我们跳转到#/home这也就是重定向。
效果截图：
路由传参
路由传参有多种方式，常用的有两种：params与query。
params形式传参
注意：
- 使用v-bind绑定to属性。
- to属性的值是一个json对象，此对象有两个属性：name属性和params属性。
- name属性就是要路由的对象。所以，在路由规则列表中，每一个路由规则都应用有一个name值。
- params属性就是要传递的参数。也是一个json对象。
- 组件接收参数时，使用 this.$route.params.参数名 的形式。
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<p>
<router-link :to="{name:'News',params:{msg:'国内'}}">点击这里会把国内传过去</router-link>
</p>
<router-view></router-view>
</div>
<script>
const News = {
data(){
return {
msg:''
}
},
template: `<div> {{msg}}新闻</div>`,
created(){
this.msg = this.$route.params.msg;
console.log(this.$route.params)
}
}
// 2. 定义路由规则对象（每个路由应该映射一个组件）
const routes = [
{
path: '/news',
name: 'News',
component: News,
}
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
//如果路由规则对象名也为routes，那么就可以简写为 routes
routes: routes
})
var vm = new Vue({
el: '#app',
data: {},
// 将路由添加到Vue中
router,
});
</script>
</body>
</html>
效果动图：
query形式传参
注意：
- to属性的值仍然是一个json对象，但是两个属性变了，一个是path，一个是query。
- path属性就是路由地址，对应路由规则中的path值。
- query属性就是要传递的参数。也是一个json对象。
- 组件接收参数时，使用 this.$route.query.参数名 的形式。
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p>
<router-link :to="{path:'/home',query:{msg:'hello world!'}}">home</router-link>
<router-link :to="{path:'/news',query:{id:id,name:name}}">news</router-link>
</p>
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
const Home = {
template: '<div>首页内容： {{this.$route.query.msg}} </div>'
}
const News = {
template: `<div>新闻 </br>
参数id：{{this.$route.query.id}}</br>
参数name：{{this.$route.query.name}}
</div>`
}
const routes = [{
path: '/home',
component: Home
}, {
path: '/news',
component: News
}]
const router = new VueRouter({
routes
})
var vm = new Vue({
el: '#app',
data: {
id:666,
name:'Keafmd'
},
router
})
</script>
</body>
</html>
效果动图：
params方式与query方式的区别
query方式传值：
params方式传值：
总结：params方式与query方式的区别：
- query方式：
- 类似于get方式，参数会在路由中显示，可以用做刷新后仍然存在的参数。
- 利用路由规则中的path跳转。
- params方式：
- 类似于post方式，参数不会在路由中显示，页面刷新后参数将不存在。
- 利用路由规则中的name跳转。
编程式路由
利用JS实现路由跳转
router-link标签可以实现页面超链接形式的路由跳转。但是实际开发中，在很多情况下，需要通过某些逻辑判断来确定如何进行路由跳转。也就是说：需要在js代码中进行路由跳转。此时可以使用编程式路由。
- 使用this.$router.push方法可以实现路由跳转，方法的第一个参数可为string类型的路径，或者可以通过对象将相应参数传入。
- 通过this.$router.go(n)方法可以实现路由的前进后退，n表示跳转的个数，正数表示前进，负数表示后退。
- 如果只想实现前进后退可以使用this.$router.forward()（前进一页），以及this.$router.back()（后退一页）。
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p>
<button @click="toHome">首页</button>
<button @click="toNews">新闻</button>
<button @click="toLogin">登陆</button>
<button @click="doForward1">前进</button>
<button @click="doForward2">前进</button>
<button @click="doBack1">后退</button>
<button @click="doBack2">后退</button>
</p>
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
const Home = {
template: '<div>首页</div>'
}
const News = {
template: '<div>新闻</div>'
}
const Login = {
template: '<div>登陆</div>'
}
const routes = [{
path: '/',
component: Home
}, {
path: '/home',
component: Home
}, {
path: '/news',
component: News
}, {
path: '/login',
component: Login
}]
const router = new VueRouter({
routes
})
var vm = new Vue({
el: '#app',
data: {},
router,
methods:{
toHome(){
//无参数时，push方法中直接写路由地址
this.$router.push('/home');
},
toNews(){
//有参数时，push方法中写一个json对象
this.$router.push({path:'/news',query:{name:'zhangsan'}});
},
toLogin(){
this.$router.push('/login');
},
doForward1(){
this.$router.forward();
},
doForward2(){
this.$router.go(1);
},
doBack1(){
this.$router.back();
},
doBack2(){
this.$router.go(-1);
}
}
})
</script>
</body>
</html>
效果动图：
通过watch实现路由监听
通过watch属性设置监听$route变化，达到监听路由跳转的目的。
在上面代码中添加watch监听：
watch: {
// 监听路由跳转。
$route(newRoute, oldRoute) {
console.log('watch', newRoute, oldRoute)
}
}
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p>
<button @click="toHome">首页</button>
<button @click="toNews">新闻</button>
<button @click="toLogin">登陆</button>
<button @click="doForward1">前进</button>
<button @click="doForward2">前进</button>
<button @click="doBack1">后退</button>
<button @click="doBack2">后退</button>
</p>
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
const Home = {
template: '<div>首页</div>'
}
const News = {
template: '<div>新闻</div>'
}
const Login = {
template: '<div>登陆</div>'
}
const routes = [{
path: '/',
component: Home
}, {
path: '/home',
component: Home
}, {
path: '/news',
component: News
}, {
path: '/login',
component: Login
}]
const router = new VueRouter({
routes
})
var vm = new Vue({
el: '#app',
data: {},
router,
methods:{
toHome(){
//无参数时，push方法中直接写路由地址
this.$router.push('/home');
},
toNews(){
//有参数时，push方法中写一个json对象
this.$router.push({path:'/news',query:{name:'zhangsan'}});
},
toLogin(){
this.$router.push('/login');
},
doForward1(){
this.$router.forward();
},
doForward2(){
this.$router.go(1);
},
doBack1(){
this.$router.back();
},
doBack2(){
this.$router.go(-1);
}
},
watch: {
// 监听路由跳转。
$route(newRoute, oldRoute) {
console.log('watch', newRoute, oldRoute)
}
}
})
</script>
</body>
</html>
效果动图：
导航守卫
路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。 对此，vue-route 提供了实现导航守卫（navigation-guards）的功能。
你可以使用 router.beforeEach 注册一个全局前置守卫：
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
每个守卫方法接收三个参数：
- to：即将要进入的目标路由对象（去哪里），可以使用 to.path 获取即将要进入路由地址。
- from：当前导航正要离开的路由对象（从哪来），可以使用 from.path 获取正要离开的路由地址。
- next：一个函数，表示继续执行下一个路由。（如果没有next，将不会进入到下一个路由）。
下面例子中实现了如下功能：
- 列举需要判断登录状态的 “路由集合”，当跳转至集合中的路由时，如果“未登录状态”，则跳转到登录页面。
- 当直接进入登录页面LoginPage时，如果“已登录状态”，则跳转到首页HomePage。
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box">
<p>
<router-link to="/home">home</router-link>
<router-link to="/news">news</router-link>
<router-link to="/music">music</router-link>
<router-link to="/login">login</router-link>
</p>
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
const Home = {
template: '<div>首页</div>'
}
const News = {
template: '<div>新闻</div>'
}
const Music = {
template: '<div>音乐</div>'
}
const Login = {
template: '<div>登录</div>'
}
const routes = [{
path: '/',
component: Home
}, {
path: '/home',
component: Home
}, {
path: '/news',
component: News
}, {
path: '/music',
component: Music
}, {
path: '/login',
component: Login
}]
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
var vm = new Vue({
el: '#box',
data: {},
router
})
// 添加全局路由守卫
router.beforeEach((to, from, next) => {
//创建守卫规则集合(这里表示'/news'与'/music'路径是需要权限验证的)
const nextRoute = ['/news', '/music'];
// 使用isLogin来模拟是否登录
let isLogin = false;
// let isLogin = true;
// 判断to.path(要跳转的路径)是否是需要权限验证的
if (nextRoute.indexOf(to.path) >= 0) {
if (!isLogin) {
router.push({
path: '/login'
})
location.reload(); //必须要有
}
}
// 已登录状态；当路由到login时，跳转至home
if (to.path === '/login') {
if (isLogin) {
router.push({
path: '/home'
});
location.reload();
}
}
next(); //必须要有
});
</script>
</body>
</html>
isLogin = false效果动图：
我们可以看出当我们点击 news 和 music 时，因为isLogin = false，所以会自动跳转到 login 界面。
isLogin = true效果动图：
我们可以看出当我们点击 news 和 music 时，因为isLogin = true，所以会显示相应的界面。
看完如果对你有帮助，感谢点赞支持！
如果你是电脑端，看到右下角的 “一键三连” 了吗，没错点它[哈哈]
加油！
共同努力！
Keafmd