一、vueRouter实现原理
VueRouter的实现原理是根据监控锚点值的改变，从而不断修改组件内容来实现的，我们来试试不使用VueRouter，自己实现路由控制，如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<a href="#/login">登录</a>
<a href="#/register">注册</a>
<a href="#/home">首页</a>
</div>
<script>
let oDiv = document.getElementById("app");
window.onhashchange = function () {
console.log(location.hash);
switch (location.hash){
case "#/login":
oDiv.innerHTML = `<h1>登录</h1>`;
break;
case "#/register":
oDiv.innerHTML = `<h1>注册</h1>`;
break;
case "#/home":
oDiv.innerHTML = `<h1>首页</h1>`;
break;
default:
oDiv.innerHTML = `<h1>首页</h1>`;
break;
}
}
</script>
</body>
</html>
二、vue路由的安装使用
2.1下载vue-route.js
https://unpkg.com/vue-router/dist/vue-router.js
2.2引入vueRouter并使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<!--1. 引入vue-router-->
<script src="../statics/vue-router.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
let Home = {
template: `
<div>这是首页</div>
`
};
let Login = {
template: `
<div>登录页面</div>
`
};
let Register = {
template: `
<div>注册页面</div>
`
};
let App = {
template: `
<div>
<router-link to="/home">首页</router-link>
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
`
};
// 2. 在vue中中使用vue-router对象
Vue.use(VueRouter);
// 3. 创建一个vue-router对象
let router = new VueRouter({
// 此处要特别注意是routes，不是routers
routes: [
{
path: '/home',
component: Home,
},
{
path: "/login",
component: Login
},
{
path: "/register",
component: Register,
}
]
});
// 4. 在vue实例中使用新创建的vue-router对象
new Vue({
el: "#app",
template: `<app></app>`,
components: {
"app": App,
},
router: router
})
</script>
</body>
</html>
三、VueRouter知识点
3.1命名路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<script src="../statics/vue-router.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
let Home = {
template: `
<div>这是首页页面</div>
`
};
let Login = {
template: `
<div>这是登录页面</div>
`
};
let Register = {
template: `
<div>这是注册页面</div>
`
};
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/home',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'register',
path: '/register',
component: Register,
}
]
});
let App = {
template: `
<div>
<router-link :to="{ name:'home' }">首页</router-link>
<router-link :to="{ name: 'login' }">登录</router-link>
<router-link :to="{ name: 'register' }">注册</router-link>
<router-view></router-view>
</div>
`,
};
Vue.use(VueRouter);
new Vue({
el: "#app",
template: `<App></App>`,
components: {
App
},
router: router
})
</script>
</body>
</html>
3.2路由参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<script src="../statics/vue-router.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
// xxx.html/user/1
// xxx.html/user/userid=2
let userParams = {
template: `
<div>用户一信息概要</div>
`
};
let userQuery = {
template: `
<div>用户二信息概要</div>
`
};
let router = new VueRouter({
routes: [
{
name: 'userParams',
path: '/userParams/:userId',
component: userParams,
},
{
name: 'userQuery',
path: '/userParams',
component: userQuery,
}
]
});
let App = {
template: `
<div>
<router-link :to="{ name: 'userParams', params: { userId: 1} }">Get User1</router-link>
<router-link :to="{ name: 'userQuery', query: { userId: 2} }">Get User2</router-link>
<router-view></router-view>
</div>
`,
};
Vue.use(VueRouter);
new Vue({
el: "#app",
template: `<App></App>`,
components: {
App
},
router: router
})
</script>
</body>
</html>
3.3路由参数实现原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<!--1. 引入vue-router-->
<script src="../statics/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<script>
// 常用的两种查询方式
// xxx.html/user/1
// xxx.html/user/id=1
let userParams = {
template: `
<div>用户一信息</div>
`,
created () {
console.log('this: ', this);
console.log(this.$route);
console.log(this.$route.params.userId);
// 此时可以发送ajax请求到后端获取数据
}
};
let userQuery = {
template: `
<div>用户二信息</div>
`,
created () {
console.log(this.$route);
console.log(this.$route.query.userId);
// 此时可以发送ajax请求到后端获取数据
}
};
let App = {
template: `
<div>
<router-link :to="{ name: 'userParams', params: { userId: 1} }">用户一</router-link>
<router-link :to="{ name: 'userQuery', query: { userId: 2 } }">用户二</router-link>
<router-view></router-view>
</div>
`,
};
// 在vue中使用vue-router
Vue.use(VueRouter);
// 创建一个VueRouter对象
let router = new VueRouter({
routes: [
{
name: 'userParams',
path: '/users/:userId',
component: userParams
},
{
name: 'userQuery',
path: '/users',
component: userQuery,
}
]
});
// 在vue中使用vue-router
new Vue({
el: "#app",
template: `<app></app>`,
components: {
'app': App,
},
router: router,
created () {
console.log('this: ', this);
console.log(this.$route);
}
})
</script>
</body>
</html>
3.4子路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<script src="../statics/vue-router.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
let Home = {
template: `
<div>首页</div>
`,
};
let Linux = {
template: `
<div>这是linux免费课</div>
`
};
let Go = {
template: `
<div>这是go免费课</div>
`
};
let FreeCourses = {
template: `
<div>
<div>免费课程</div>
<router-link to="linux">Linux</router-link>
<router-link to="go">Go</router-link>
<router-view></router-view>
</div>
`
};
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/home',
component: Home,
},
{
name: 'freecourses',
path: '/freecourses',
component: FreeCourses,
children: [
{
path: 'linux',
component: Linux,
},
{
path: 'go',
component: Go,
}
]
}
]
});
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'freecourses' }">免费课</router-link>
<router-view></router-view>
</div>
`,
};
Vue.use(VueRouter);
new Vue({
el: "#app",
template: `<App></App>`,
components: {
App
},
router: router,
})
</script>
</body>
</html>
子路由append
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.home {
500px;
height: 500px;
background-color: #0FC57C;
}
.courses {
500px;
height: 500px;
background-color: #5b80b2;
}
</style>
<script src="../statics/vue.min.js"></script>
<!--1. 引入vue-router-->
<script src="../statics/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<script>
let Home = {
template: `
<div class="home">这是首页</div>
`
};
let Courses = {
template: `
<div class="courses">课程页面
<div class="details">
<router-link to="details" append>课程详情</router-link>
<router-link to="students">学员故事</router-link>
<router-view></router-view>
</div>
</div>
`
};
let Details = {
template: `
<div>课程详情页</div>
`
};
let Students = {
template: `
<div>学员故事</div>
`
};
let App = {
template: `
<div>
<router-link to="/">首页</router-link>
<router-link to="/courses">课程页面</router-link>
<router-view></router-view>
</div>
`
};
let routes = [
{
path: '/',
component: Home
},
{
path: '/courses',
component: Courses,
children: [
{
path: 'details',
component: Details,
},
{
path: 'students',
component: Students
}
]
}
];
Vue.use(VueRouter);
let router = new VueRouter({
routes: routes,
});
new Vue({
el: "#app",
template: `<app></app>`,
router: router,
components: {
'app': App,
}
})
</script>
</body>
</html>
VueRouter子路由非append
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.home {
500px;
height: 500px;
}
.courses {
500px;
height: 500px;
}
</style>
<script src="../statics/vue.min.js"></script>
<!--1. 引入vue-router-->
<script src="../statics/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<script>
let Home = {
template: `
<div class="home">这是首页</div>
`
};
let Courses = {
template: `
<div class="courses">课程页面
<div class="details">
<router-link to="/courses/details">课程详情</router-link>
<router-link to="/courses/students">学员故事</router-link>
<router-view></router-view>
</div>
</div>
`
};
let Details = {
template: `
<div>课程详情页</div>
`
};
let Students = {
template: `
<div>学员故事</div>
`
};
let App = {
template: `
<div>
<router-link to="/">首页</router-link>
<router-link to="/courses">课程页面</router-link>
<router-view></router-view>
</div>
`
};
let routes = [
{
path: '/',
component: Home
},
{
path: '/courses',
component: Courses,
children: [
{
path: '/courses/details',
component: Details,
},
{
path: '/courses/students',
component: Students
}
]
}
];
Vue.use(VueRouter);
let router = new VueRouter({
routes: routes,
});
new Vue({
el: "#app",
template: `<app></app>`,
router: router,
components: {
'app': App,
}
})
</script>
</body>
</html>
3.5redirect（重定向）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<script src="../statics/vue-router.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
let Home = {
template: `
<div>首页</div>
`,
};
let Login = {
template: `
<div>这是登录页面</div>
`
};
let PayPage = {
template: `
<div>这是支付页面</div>
`
};
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/home',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'pay',
path: '/paypage',
redirect: '/login',
component: PayPage
}
]
});
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'login' }">登录</router-link>
<router-link :to="{ name: 'pay' }">支付</router-link>
<router-view></router-view>
</div>
`,
};
Vue.use(VueRouter);
new Vue({
el: "#app",
template: `<App></App>`,
components: {
App
},
router: router,
})
</script>
</body>
</html>
3.6手动路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.home {
500px;
height: 500px;
background-color: #0FC57C;
}
.details {
500px;
height: 500px;
background-color: #5b80b2;
}
</style>
<script src="../statics/vue.min.js"></script>
<!--1. 引入vue-router-->
<script src="../statics/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<script>
let Home = {
template: `
<div>
<div class="home">这是首页</div>
</div>
`,
};
let Details = {
template: `
<div class="details">课程详情页</div>
`
};
let App = {
template: `
<div>
<router-link to="/">首页</router-link>
<button @click="myClick">点击跳转到课程详情页面</button>
<router-view></router-view>
</div>
`,
methods: {
myClick: function () {
this.$router.push('/details');
}
}
};
let routes = [
{
path: '/',
component: Home
},
{
path: '/details',
component: Details
}
];
Vue.use(VueRouter);
let router = new VueRouter({
routes: routes,
});
new Vue({
el: "#app",
template: `<app></app>`,
router: router,
components: {
'app': App,
}
})
</script>
</body>
</html>
3.7路由钩子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.home {
500px;
height: 500px;
background-color: #0FC57C;
}
.login {
500px;
height: 500px;
background-color: #5b80b2;
}
.user {
500px;
height: 500px;
background-color: #5b80b2;
}
</style>
<script src="../statics/vue.min.js"></script>
<!--1. 引入vue-router-->
<script src="../statics/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<script>
let homePage = {
template: `
<div class="home"><h3>这是首页</h3></div>
`
};
let loginPage = {
template: `
<div class="login"><h3>这是登录页面</h3></div>
`
};
let userPage = {
template: `
<div class="user"><h3>这是用户管理页面</h3></div>
`
};
let App = {
template: `
<div>
<router-link to="/">首页</router-link>
<router-link to="/login">登录</router-link>
<router-link to="userinfo">用户</router-link>
<router-view></router-view>
</div>
`
};
let routes = [
{
path: '/',
component: homePage
},
{
path: '/login',
component: loginPage,
},
{
path: '/userinfo',
component: userPage,
}
];
Vue.use(VueRouter);
let router = new VueRouter({
routes: routes,
});
router.beforeEach(function (to, from, next) {
// 如果next的参数是具体的路径，则跳转到该路径
// 如果next没有被传入参数，则什么都不做，保持原来不变
// 如果next的参数是一个error实例，跳转终止
next();
});
new Vue({
el: "#app",
template: `<app></app>`,
components: {
'app': App
},
router: router,
})
</script>
</body>
</html>
3.8路由钩子实现登陆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.home {
500px;
height: 500px;
background-color: #0FC57C;
}
.login {
500px;
height: 500px;
background-color: #5b80b2;
}
.user {
500px;
height: 500px;
background-color: #5b80b2;
}
</style>
<script src="../statics/vue.min.js"></script>
<!--1. 引入vue-router-->
<script src="../statics/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<script>
let homePage = {
template: `
<div class="home"><h3>这是首页</h3></div>
`
};
let loginPage = {
template: `
<div class="login"><h3>这是登录页面</h3></div>
`
};
let userPage = {
template: `
<div class="user">
<router-link to="/userinfo/userInt">自我介绍</router-link>
<router-link to="/userinfo/userStudy">学习中心</router-link>
<router-view></router-view>
<h3>这是用户管理页面</h3>
</div>
`
};
let userIntr = {
template: `
<div>自我介绍页面</div>
`
};
let userStudy = {
template: `
<div>学习中心</div>
`
};
let App = {
template: `
<div>
<router-link to="/">首页</router-link>
<router-link to="/login">登录</router-link>
<router-link to="userinfo">用户</router-link>
<router-view></router-view>
</div>
`
};
let routes = [
{
path: '/',
component: homePage
},
{
path: '/login',
component: loginPage,
},
{
path: '/userinfo',
// meta对象里面的属性可以自定义, 都会加载到route实例中
meta: { required_login: true },
component: userPage,
children: [
{
path: '/userinfo/userIntr',
meta: { required_login: true },
component: userIntr
},
{
path: '/userinfo/userStudy',
meta: { required_login: true },
component: userStudy,
}
]
}
];
Vue.use(VueRouter);
let router = new VueRouter({
routes: routes,
});
router.beforeEach(function (to, from, next) {
// 如果next的参数是具体的路径，则跳转到该路径
// 如果next没有被传入参数，则什么都不做，保持原来不变
// 如果next的参数是一个error实例，跳转终止
if ( to.meta.required_login ) {
next('/login');
} else {
next();
}
});
new Vue({
el: "#app",
template: `<app></app>`,
components: {
'app': App
},
router: router,
})
</script>
</body>
</html>