Vue核心插件之路由模式
- 单页面应用的路由模式:哈希模式和history.
- vue路由原理:哈希模式(核心:锚点)
原理
<a href="#login">登陆</a>
<a href="#register">注册</a>
<div id="app"></div>
<!-- 原理 -->
<script type="text/javascript">
let app = document.getElementById("app");
addEventListener("hashchange", function() {
// console.log(location.hash)
switch (location.hash) {
case "#login":
app.innerHTML = "我是登陆页"
break;
case "#register":
app.innerHTML = "我是注册页"
break;
default:
break;
}
})
</script>
安装使用(路由是以插件的形式引入到我们的vue项目)
vue-router：vue的核心插件.
- 安装:
npm i vue-router -S
- 使用:
Vue.use(VueRouter)
- 创建路由对象
var router=new VueRouter();
- 配置路由规则:
router.addRouters([路由对象])
// 路由对象{[path:"锚点",component:"组件"]}
- 交给Vue,并在Vue留坑router,
演示代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入路由插件 -->
<script src="../js/vue-router.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script type="text/javascript">
var Login={
template:`
<div>我是登陆页面</div>
`
}
// 安装路由插件
Vue.use(VueRouter);
// 创建路由对象
var router=new VueRouter({
// 配置路由
routes:[
{
path:"/login",
name:"login",
component:Login
}
]
});
new Vue({
el:"#app",
router
})
</script>
</body>
</html>
路由的跳转
<!-- 标签跳转 -->
<router-link to="/login">登陆</router-link>
|
<router-link to="/register">注册</router-link>
<!-- js跳转 -->
this.$router.push({path:"/login"})
this.$router.replace({path:"/login"}) // 不会对新的history记录
this.$router.go(-1) // 返回,读history后退一个记录
$route:路由信息对象只读
$router:路由操作对象,只写
路由的传参和取参
<!-- 传参 -->
<!-- 查询参 -->
<router-link :to="{name:'login',query:{id:1}}">登陆</router-link>
//this.id = this.$route.query.id
|
<!-- 路由参 -->
<router-link :to="{name:'register',params:{id:'2'}}">注册</router-link>
//this.id=this.$route.params.id
解决不刷新问题
<router-view :key="$route.fullpath"></router-view>
Vue嵌套路由和路由守卫
嵌套路由
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue-router.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<router-view :key="$route.fullpath"></router-view>
</div>
<script type="text/javascript">
var nav = {
template: `
<div>
<router-link :to="{name:'nav.index'}">首页</router-link>
<router-link :to="{name:'nav.about'}">关于</router-link>
<router-link :to="{name:'nav.mine'}">我的</router-link>
<router-view :key="$route.fullpath"></router-view>
</div>
`
}
var index = {
template: `
<div>我是首页</div>
`
}
var about = {
template: `
<div>我是关于页面</div>
`
}
var mine = {
template: `
<div>我是我的页面</div>
`
}
Vue.use(VueRouter);
var router = new VueRouter({
routes: [{
path: "/nav",
name: "nav",
component: nav,
// 嵌套路由增加这个属性,配置嵌套路由
children: [{
path: "",
redirect: "/nav/index"
}, {
path: "index",
name: "nav.index",
component: index,
}, {
path: "about",
name: "nav.about",
component: about,
}, {
path: "mine",
name: "nav.mine",
component: mine,
}]
}]
})
new Vue({
el: "#app",
router
})
</script>
</body>
</html>
路由守卫
new Vue({
el: "#app",
router,
// 路由守卫
mounted() {
router.beforeEach((to,from,next)=>{
console.log(to);
next();
})
}
})
