Vue之VueRouter实现原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<div id="app">
</div>
<script>
let oDiv = document.getElementById('app');
window.onhashchange = function () { # onhashchange事件，只需要修改hash值即可响应onhashchange事件中的函数（适用于上一题下一题和跳转页面等功能）
switch (location.hash) {
case '#/login':
oDiv.innerHTML = `<h1>这是登录页面</h1>`;
break;
case '#/register':
oDiv.innerHTML = `<h1>这是注册页面</h1>`;
break;
default:
oDiv.innerHTML = `<h1>这是首页</h1>`;
break;
}
}
</script>
</body>
</html>
Vue之VueRouter安装使用
<!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">
<title>Title</title>
<script src="static/vue.min.js"></script>
<script src="static/vue-router.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
// 1.在Vue根实例中使用，VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>这是主页页面</h1>
</div>
`,
};
let Login = {
template: `
<div>
<h1>这是登录页面</h1>
</div>
`,
};
let Register = {
template: `
<div>
<h1>这是注册页面</h1>
</div>
`,
};
let App = {
// 4.第四步，router-link会渲染成a标签，to会变成href属性，to后面是router中定义的路径
// 5.第五步，router-view是页面内容的渲染出口
template: `
<div>
<router-link to="/">首页</router-link>
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
`,
};
// 2.第二步实例化一个VueRouter对象
// 本质上是将路径和页面内容绑定了对应关系
let router = new VueRouter({
routes: [
{
path: '/',
// 注册Home
component: Home,
},
{
path: '/login',
component: Login,
},
{
path: '/register',
component: Register,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 3.第三步，在根实例中注册router对象
router: router,
components: {
App,
}
});
</script>
</body>
</html>
Vue之VueRouter命名路由
let App = {
// 第四步，router-link会渲染成a标签，to会变成href属性，to后面是router中定义的路径
// 第五步，router-link是页面内容的渲染出口
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>
`,
};
let router = new VueRouter({
routes: [
{
name: 'home', // 新增的
path: '/',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'register',
path: '/register',
component: Register,
},
]
});
// 其他的和上一个安装使用一样
Vue之VueRouter路由参数
<!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">
<title>Title</title>
<script src="static/vue.min.js"></script>
<script src="static/vue-router.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
// 在真实的场景中，可有以下路径形式
// user/1;
// user/userId: 1;
// 1.在Vue根实例中使用，VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>这是主页页面</h1>
</div>
`,
};
let userParams = {
template: `
<div>
<h1>这是用户一的信息</h1>
</div>
`,
};
let userQuery = {
template: `
<div>
<h1>这是用户二的信息</h1>
</div>
`,
};
let App = {
// 第四步，router-link会渲染成a标签，to会变成href属性，to后面是router中定义的路径
// 第五步，router-link是页面内容的渲染出口
template: `
// 注意这里需要绑定
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<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>
`,
};
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
// xxx/1 这是路径显示
name: 'userParams',
path: '/user/:userId',
component: userParams,
},
{
// xxx/?userId=1 这是路径显示
name: 'userQuery',
path: '/user',
component: userQuery,
},
]
});
new Vue({
el: '#app',
// 第三步，在根实例中注册router对象,
template: `<App/>`,
router: router,
components: {
App,
}
})
</script>
</body>
</html>
Vue之VueRouter子路由
<!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">
<title>Title</title>
<script src="static/vue.min.js"></script>
<script src="static/vue-router.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
// 在真实的场景中，可有以下路径形式
// user/1;
// user/userId: 1;
// 1.在Vue根实例中使用，VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>这是主页页面</h1>
</div>
`,
};
let Courses = {
template: `
<div>
<h1>这是课程页面</h1>
<router-link to="lightcourses">轻课</router-link>
<router-link to="degreecourses">学位课</router-link>
<router-view></router-view>
</div>
`,
};
let LightCourses = {
template: `
<div>
<h1>这是轻课页面</h1>
</div>
`,
};
let DegreeCourses = {
template: `
<div>
<h1>这是学位课程页面</h1>
</div>
`,
};
let App = {
// 第四步，router-link会渲染成a标签，to会变成href属性，to后面是router中定义的路径
// 第五步，router-link是页面内容的渲染出口
template: `
// 注意这里需要绑定
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'courses' }">课程页面</router-link>
<router-view></router-view>
</div>
`,
};
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
// xxx/1 这是路径显示
name: 'courses',
path: '/courses',
component: Courses,
children: [
{
path: 'lightcourses',
component: LightCourses,
},
{
path: 'degreecourses',
component: DegreeCourses,
}
]
},
]
});
new Vue({
el: '#app',
// 第三步，在根实例中注册router对象,
template: `<App/>`,
router: router,
components: {
App,
}
})
</script>
</body>
</html>
Vue之VueRouter子路由append版
<router-link to="lightcourses" append >轻课</router-link> // 加append
Vue之VueRouter子路由append升级版
<!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">
<title>Title</title>
<script src="static/vue.min.js"></script>
<script src="static/vue-router.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
// 在真实的场景中，可有以下路径形式
// user/1;
// user/userId: 1;
// 1.在Vue根实例中使用，VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>这是主页页面</h1>
</div>
`,
};
let Courses = {
template: `
<div>
<h1>这是课程页面</h1>
<router-link :to="{ name: 'lightcourses' }">轻课</router-link>
<router-link :to="{ name: 'degreecourses' }">学位课</router-link>
<router-view></router-view>
</div>
`,
};
let LightCourses = {
template: `
<div>
<h1>这是轻课页面</h1>
</div>
`,
};
let DegreeCourses = {
template: `
<div>
<h1>这是学位课程页面</h1>
</div>
`,
};
let App = {
// 第四步，router-link会渲染成a标签，to会变成href属性，to后面是router中定义的路径
// 第五步，router-link是页面内容的渲染出口
template: `
// 注意这里需要绑定
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'courses' }">课程页面</router-link>
<router-view></router-view>
</div>
`,
};
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
// xxx/1 这是路径显示
name: 'courses',
path: '/courses',
component: Courses,
children: [
{
name: 'lightcourses',
path: 'lightcourses',
component: LightCourses,
},
{
name: 'degreecourses',
path: 'degreecourses',
component: DegreeCourses,
}
]
},
]
});
new Vue({
el: '#app',
// 第三步，在根实例中注册router对象,
template: `<App/>`,
router: router,
components: {
App,
}
})
</script>
</body>
</html>
Vue之VueRouter子路由重定向
<!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">
<title>Title</title>
<script src="static/vue.min.js"></script>
<script src="static/vue-router.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
// 在真实的场景中，可有以下路径形式
// user/1;
// user/userId: 1;
// 1.在Vue根实例中使用，VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>这是主页页面</h1>
</div>
`,
};
let Login = {
template: `
<div>
<h1>这是登录页面</h1>
</div>
`,
};
let Pay = {
template: `
<div>
<h1>这是支付页面</h1>
</div>
`,
};
let App = {
// 第四步，router-link会渲染成a标签，to会变成href属性，to后面是router中定义的路径
// 第五步，router-link是页面内容的渲染出口
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>
`,
};
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
// xxx/1 这是路径显示
name: 'login',
path: '/login',
component: Login,
},
{
// xxx/1 这是路径显示
name: 'pay',
path: '/pay',
redirect: '/login', // 重定向点击支付还是跳转登录页面
component: Pay,
},
]
});
new Vue({
el: '#app',
// 第三步，在根实例中注册router对象,
template: `<App/>`,
router: router,
components: {
App,
}
})
</script>
</body>
</html>
Vue之VueRouter子路由的钩子函数
<!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">
<title>Title</title>
<script src="static/vue.min.js"></script>
<script src="static/vue-router.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
// 在真实的场景中，可有以下路径形式
// user/1;
// user/userId: 1;
// 1.在Vue根实例中使用，VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>这是主页页面</h1>
</div>
`,
};
let Login = {
template: `
<div>
<h1>这是登录页面</h1>
</div>
`,
};
let Pay = {
template: `
<div>
<h1>这是支付页面</h1>
</div>
`,
};
let App = {
// 第四步，router-link会渲染成a标签，to会变成href属性，to后面是router中定义的路径
// 第五步，router-link是页面内容的渲染出口
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>
`,
};
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
// xxx/1 这是路径显示
name: 'login',
path: '/login',
component: Login,
},
{
// xxx/1 这是路径显示
name: 'pay',
path: '/pay',
meta: { required_login: true },
component: Pay,
},
]
});
// 通过router对象的beforeEach（function（to，from，next））
router .beforeEach(function (to, from, next) {
if (to.meta.required_login){
next('/login');
}else{
next();
}
});
new Vue({
el: '#app',
// 第三步，在根实例中注册router对象,
template: `<App/>`,
router: router,
components: {
App,
}
})
</script>
</body>
</html>
Vue之VueRouter子路由去掉井号
let router = new VueRouter({
mode: 'history', // 新加的去掉井号的内容
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
// xxx/1 这是路径显示
name: 'login',
path: '/login',
component: Login,
},
{
// xxx/1 这是路径显示
name: 'pay',
path: '/pay',
meta: { required_login: true },
component: Pay,
},
]
});
$route和$router的区别
$route 表示(当前路由信息对象)
**1.$route.path**
字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。
**2.$route.params**
一个 key/value 对象，包含了 动态片段 和 全匹配片段，
如果没有路由参数，就是一个空对象。
**3.$route.query**
一个 key/value 对象，表示 URL 查询参数。
例如，对于路径 /foo?user=1，则有 $route.query.user == 1，
如果没有查询参数，则是个空对象。
**4.$route.hash**
当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。锚点
**5.$route.fullPath**
完成解析后的 URL，包含查询参数和 hash 的完整路径。
**6.$route.matched**
数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
**7.$route.name 当前路径名字**
**8.$route.meta 路由元信息
$router全局的路由实例，是router构造方法的实例
// 字符串
this.$router.push('home')
// 对象
this.$router.push({ path: 'home' })
// 命名的路由
this.$router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=123
this.$router.push({ path: 'register', query: { plan: '123' }})
// 页面路由跳转 前进或者后退
this.$router.go(-1) // 后退
//push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面，
不会向 history 栈添加一个新的记录
<router-link to="/05" replace>05</router-link>
// 一般使用replace来做404页面
this.$router.replace('/')
push方法其实和<router-link :to="...">是等同的。
注意：push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。