router是vue一个插件，用来提供路由功能。通过路由的改变可以动态加载组件，达到开发单页面程序的目的。
路由的创建和使用：
1.创建路由对象数组
2.创建路由器实例对象 将路由器对象数组注入到路由器对象。
3.将路由器对象注入到vue实例中
4.使用
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
</head>
<body>
<div id="app">
<!-- 4.使用路由 to 表示要去的路由 -->
<router-link to="/article">去文章管理</router-link>
<router-link to="/column">去栏目管理</router-link>
</div>
<script>
// 1.配置路由对象数组
let routes=[{
path:'/article',
component:article
},
{
path:'/column',
component:column
}
];
// 2.创建路由对象
let router=new VueRouter({
routes,
mode:'history'
});
new Vue({
// 3.将路由对象注入到vue实例中
router,
el:"#app",
data:{},
})
</script>
</body>
</html>
动态路由
需要把某种模式匹配到的所有路由，全部映射到同一组件。
假设，对于所有id不同的用户，都要用一个user组件来渲染，就可以在使用vue-router的路径路由中使用动态路由参数来达到效果。
复用组件时，要想要对路由参数的变化作出响应，可以简单地 watch监听 $route对象，或者使用组件内部的导航守卫。
<!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>Document</title>
</head>
<body>
<div id="app">
<!-- 4.使用路由 -->
<router-link to="/user/id/1/username/lili">去A路由</router-link>
</div>
<script>
// 声明一个组件
let myA={
template:`
<div>A组件{{id}}--{{username}}</div>
`,
data(){
return{
id:null,
username:''
}
},
// 方法一 ：监听路由
watch:{
$route:{
handler(){
this.id=this.$route.parasm.id;
this.$route.params.username;
},
// 深监听
deep:true
}
},
// 方法二： 使用组件内部的导航卫士 监听路由发生变化
beforeRouteUpdate(to,from,next){
this.id=to.params.id;
this.username=to.params.username;
}
};
// 1.定义路由对象数组
let routes=[{
path:'/user/id/:id/username/:username',
component:myA
}];
// 2.创建路由器对象
let router=new VueRouter({
routes
})
// 3.注册路由器对象
new Vue({
el:"#app",
router,
data:{},
component:{
'my-a':myA
}
})
</script>
</body>
</html>
编程式导航
页面导航分为两种：声明式导航和编程式导航。
声明式导航：通过点击链接实现导航的方式。例如：a超链接或者vue-router里的标签。
编程式导航：通过调用Javascript形式的API实现的导航方式。例如网页中的location.href
页面跳转的方式：
声明式：a标签? router-link(实质上就是a标签)?
编程式：$router.push? $router.replace? $router.go
?? ?1.query传递的参数携带在url地址栏 params携带在$route对象中
?? ?2.params携带的参数是一次性的 刷新页面参数失效
??
vue-router中常用的编程式导航API有：this.$router.push()? this.$router.replace()? this.$router.go()
this.$router.push()
参数有：
1：路径字符串， this.$router.push('/user')
2: 路径对象， this.$router.push(path:'/user')
3: 命名路由对象? this.$router.push({name:'/user'})
4:带查询参数? 例如变成? /user?username=lili 的形式?? this.$router.push({path:'/user',query:{username}})
?
this.$router.push({
//1. path query
//2.name params
});
this.$router.replace()
与this.$router.push()的作用基本相同。不过在跳转到指定hash地址，不会增加新的历史记录，只会替换掉当前的历史记录，不会产生历史记录栈
??
$router.replace({
path query
});
this.$router.go(n)
参数是数字，数字的大小表示浏览器历史中的前进或者后退的页数，负值表示后退，正值表示前进
|