V u e − R o u t e r 的基础使用 Vue-Router的基础使用 Vue−Router的基础使用
一 使用CDN
1.使用最新版本
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
视频教程:B站、网易云课堂、腾讯课堂
代码地址:Gitee、Github
存储地址:
百度云-提取码:
Google云
基本使用
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title></title>
</head>
<body>
<div id="app">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Major</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<router-link to="/">
首页
</router-link>
</li>
<li>
<router-link to="/page1">
page1
</router-link>
</li>
<li>
<router-link to="/page2">
page2
</router-link>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<router-view></router-view>
</div>
</div>
<script>
var index = Vue.extend({template:"<h1>首页</h1>"})
var page1 = Vue.extend({template:"<h1>page1</h1>"})
var page2 = Vue.extend({template:"<h1>page2</h1>"})
let router = new VueRouter({
routes:[
{path:"/",component:index},
{path:"/page1",component:page1},
{path:"/page2",component:page2},
]
})
new Vue({
el:'#app',
router,
})
</script>
</body>
</html>
动态路由
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
<title></title>
</head>
<body>
<div id='app'>
<ul>
<li>
<router-link to="/">首页</router-link>
</li>
<li>
<router-link to="/profile/123">个人中心</router-link>
</li>
</ul>
<router-view></router-view>
</div>
<script>
let index = Vue.extend({template:"<h1>首页</h1>"})
let profile = Vue.extend({template:"<h1>个人中心:{{$route.params.userid}}</h1>",
mounted(){
console.log(this.$route);
console.log(this.$router);
}
})
let router = new VueRouter({
routes:[
{path:"/",component:index},
{path:"/profile/:userid",component:profile},
]
})
new Vue({
el:'#app',
router,
})
</script>
</body>
</html>
组件复用
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
<title></title>
</head>
<body>
<div id='app'>
<ul>
<li>
<router-link to="/profile/major_1">major_1个人中心</router-link>
</li>
<li>
<router-link to="/profile/major_2">major_2个人中心</router-link>
</li>
</ul>
<router-view></router-view>
</div>
<script>
let index = Vue.extend({template:"<h1>首页</h1>"})
let profile = Vue.extend({template:"<h1>个人中心:{{$route.params.userid}}</h1>",
mounted(){
console.log(this.$route.params.userid);
// console.log(this.$route);
// console.log(this.$router);
},
watch:{
"$route":function(to,from){
console.log("to",to);
console.log("from",from);
}
},
/* beforeRouteUpdate:function(to,from,next){
console.log("to",to);
console.log("from",from);
next()
} */
})
let router = new VueRouter({
routes:[
{path:"/",component:index},
{path:"/profile/:userid",component:profile},
]
})
new Vue({
el:'#app',
router,
})
</script>
</body>
</html>
404错误配置
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
<title></title>
</head>
<body>
<div id='app'>
<router-view></router-view>
</div>
<script>
let index= Vue.extend({
template:"<h1>首页</h1>"
})
let aboutus= Vue.extend({
template:"<p>关于我们</p>"
})
let profile= Vue.extend({
template:"<h1>个人中心:{{$route.params.userid}}</h1>",
mounted(){
if(this.$route.params.userid != '123'){
this.$router.replace("/404")
}
},
watch:{
"route":function(to,from){
// 解决复用问题
}
}
})
let notfound= Vue.extend({
template:"<h1>404页面没有找到</h1>"
})
let router = new VueRouter({
routes:[
{path:"/",component:index},
{path:"/aboutus",component:aboutus},
{path:"/profile/:userid",component:profile},
{path:"/404",component:notfound},
]
}
)
new Vue({
el:'#app',
router:router
})
</script>
</body>
</html>
路由嵌套(子路由)
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title></title>
</head>
<body>
<div id='app'>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Major_Page</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<router-link to="/">首页</router-link>
</li>
<li><router-link to="/user/123">我的主页</router-link></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<router-view></router-view>
</div>
</div>
<script>
let index = Vue.extend({
template:"<h1>首页</h1>"
})
let user = Vue.extend({
template:`
<div>
<h1>我的主页</h1>
<ul class="nav nav-tabs">
<li role="presentation" class="active">
<router-link to="/user/123/setting">设置</router-link>
</li>
<li role="presentation">
<router-link to="/user/123/message">消息</router-link>
</li>
</ul>
<div class="container">
<router-view></router-view>
</div>
</div>
`
})
let user_setting = Vue.extend({
template:"<h3>个人中心</h3>"
})
let user_message = Vue.extend({
template:"<h3>消息</h3></h3>"
})
let router = new VueRouter({
routes:[
{path:"/",component:index},
{
path:"/user/:userid",
component:user,
children:[
{path:"",component:user_setting},
{path:"setting",component:user_setting},
{path:"message",component:user_message},
]
}
]
})
new Vue({
el:'#app',
router,
})
</script>
</body>
</html>
编程式导航
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
<title></title>
</head>
<body>
<div id='app'>
<button @click="gotoPost">帖子列表</button>
<button @click="gotoProfile">个人中心</button>
<button @click="gotoLogin">登录</button>
<button @click="gotoNext">next</button>
<button @click="gotoPrev">prev</button>
<router-view></router-view>
</div>
<script>
let post = Vue.extend({
template:"<h1>帖子列表</h1>"
})
let profile = Vue.extend({
template:"<h1>个人中心:{{$route.params.userid}}</h1>"
})
let login = Vue.extend({
template:"<h1>登录界面:{{$route.query}}</h1>"
})
let router =new VueRouter({
routes:[
{path:"/post",component:post},
{path:"/profile/:userid",component:profile,name:"myprofile"},
{path:"/login",component:login},
]
})
new Vue({
el:'#app',
router,
methods:{
gotoPost(){
this.$router.push("/post")
},
gotoProfile(){
//this.$router.push("/profile/123")
//this.$router.push({path:"/profile/123"})
this.$router.push({name:"myprofile",params:{userid:"aaa"}})
},
gotoLogin(){
let currentPath = this.$route.fullPath
this.$router.push({path:"/login",query:{from:currentPath}})
},
gotoNext(){
this.$router.go(1)
},
gotoPrev(){
this.$router.go(-1)
}
}
})
</script>
</body>
</html>
命名视图
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
<style>
.header{
width:100%;
height:200px;
background: pink;
}
.body{
display: flex;
height: 800px;
}
.body .sidebar{
width: 200px;
background: salmon;
}
.body .main{
flex:1;
background: blanchedalmond;
}
.footer{
background: gray;
height: 200px;
}
</style>
<title></title>
</head>
<body>
<div id='app'>
<div class="header">
<router-view name="header"></router-view>
</div>
<div class="body">
<div class="sidebar">
<router-view name="sidebar"></router-view>
</div>
<div class="main">
<router-view name="main"></router-view>
</div>
</div>
<div class="footer">
<router-view name="footer"></router-view>
</div>
</div>
<script>
let headerComponent = Vue.extend({
template:"<div>header部分</div>"
})
let sidebarComponent = Vue.extend({
template:"<div>sidebar部分</div>"
})
let mainComponent = Vue.extend({
template:"<div>main部分</div>"
})
let footerComponent = Vue.extend({
template:"<div>footer部分</div>"
})
let router = new VueRouter({
routes:[
{
path:"/",
components:{
header:headerComponent,
sidebar:sidebarComponent,
main:mainComponent,
footer:footerComponent,
}
}
]
})
new Vue({
el:'#app',
router,
})
</script>
</body>
</html>
重定向和别名
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
<title></title>
</head>
<body>
<div id='app'>
<router-view></router-view>
</div>
<script>
let index = {template:"<h1>首页</h1>"}
let article = {template:"<h1>文章列表</h1>"}
let router = new VueRouter({
routes:[
{path:"/",redirect:"/article"},
{path:"/article",component:article,alias:"/list"}
]
})
new Vue({
el:'#app',
router,
})
</script>
</body>
</html>
全局导航守卫
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
<title></title>
</head>
<body>
<div id='app'>
<router-link to="/">首页</router-link>
<router-link to="/account">我的账户</router-link>
<router-link to="/order">我的订单</router-link>
<router-link to="/login">登录</router-link>
<router-view></router-view>
</div>
<script>
const logined = false
let index = {template:"<h1>首页</h1>"}
let account = {template:"<h1>我的账户</h1>"}
let order = {template:"<h1>我的订单</h1>"}
let login = {template:"<h1>登录</h1>"}
var router = new VueRouter({
routes:[
{path:"/",component:index,name:"index"},
{path:"/account",component:account,name:"account"},
{path:"/order",component:order,name:"order"},
{path:"/login",component:login,name:"login"},
]
})
router.beforeEach(function(to,from,next){
const authRoutes = ['account','order']
if(authRoutes.indexOf(to.name)>=0){
if(!logined){
next("/login")
} else{
next()
}
}else if(to.name =="login"){
if(logined){
next('/')
}else{
next()
}
}else{
next()
}
})
router.afterEach(function(to,from){
console.log("to:",to)
console.log("from",from)
})
new Vue({
el:'#app',
router,
data:{
},
})
</script>
</body>
</html>
路由导航守卫
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
<title></title>
</head>
<body>
<div id='app'>
<router-link to="/">首页</router-link>
<router-link to="/account">我的账户</router-link>
<router-link to="/order">我的订单</router-link>
<router-link to="/login">登录</router-link>
<router-view></router-view>
</div>
<script>
const logined = false
let index = {template:"<h1>首页</h1>"}
let account = {template:"<h1>我的账户</h1>"}
let order = {template:"<h1>我的订单</h1>"}
let login = {template:"<h1>登录</h1>"}
var router = new VueRouter({
routes:[
{path:"/",component:index,name:"index"},
{path:"/account",component:account,name:"account"},
{path:"/order",component:order,name:"order"},
{path:"/login",component:login,name:"login",beforeEnter:function(to,from,next){
if(logined){
next("/")
}else{
next()
}
}},
]
})
new Vue({
el:'#app',
router,
data:{
},
})
</script>
</body>
</html>
组件导航守卫
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
<title></title>
</head>
<body>
<div id='app'>
<router-link to="/">首页</router-link>
<router-link to="/account">我的账户</router-link>
</div>
<script>
let index = {template:"<h1>首页</h1>"}
let account = {template:"<h1>我的账户</h1>",
beforeRouteEnter:function(to,from,next){
console.log("to",to);
console.log("from",from);
console.log(this.username);
next( vm =>{
console.log('username:',vm.username);
}
)
},
beforeRouteUpdate:function(to,from,next){
console.log("to",to);
console.log("from",from);
next()
},
beforeRouteLeave(to,from,next){
let answer = window.confirm("您确定要离开这个页面吗?")
if(answer){
next()
}
}
}
var router = new VueRouter({
routes:[
{path:"/",component:index,name:"index"},
{path:"/account",component:account,name:"account"},]}
)
new Vue({
el:'#app',
router,
data:{
},
})
</script>
</body>
</html>