1.原生js模拟路由实现原理
<a href="#/login">登录</a>
<a href="#/register">注册</a>
<div id="app"></div>
<script>
var oDiv = document.getElementById(("app"))
window.onhashchange = function(){
console.log(location.hash);
switch (location.hash) {
case "#/login":
oDiv.innerHTML = "<h2>我是登录页面</h2>"
break;
case "#/register":
oDiv.innerHTML = "<h2>我是注册页面</h2>"
break;
default:
break;
}
}
</script>
2.安装Vue Router
npm install vue-router -S
3.引入Vue Router
<script src="node_modules/vue-router/dist/vue-router.js"></script>
4.使用Vue Router
如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:
Vue.use(VueRouter)
<div id="app"></div>
<script>
var Login = {
template:`
<div>我是登录页面</div>
`,
}
var Register = {
template:`
<div>我是注册页面</div>
`,
}
//配置路由对象
var router = new VueRouter({
routes : [
{
path : "/login",
component : Login
},
{
path : "/register",
component : Register
}
]
})
//引入vue-router模块,就有了两个全局组件,router-link 和 router-view
//router-link会被渲染成a标签,to渲染成href
//router-view是路由匹配组件的出口
var App = {
template:`
<div>
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
`,
}
new Vue({
el : "#app",
data(){
return {
}
},
template:`
<App/>
`,
router,
components : {
App
}
})
</script>
5.命名路由
//配置路由对象
var router = new VueRouter({
routes : [
{
path : "/login",
name : "login",
component : Login
},
{
path : "/register",
name : "register",
component : Register
}
]
})
<router-link :to="{name:'login'}">登录</router-link>
<router-link :to="{name:'register'}">注册</router-link>
6.路由参数
动态路由参数
注意看URL变化
点击用户1时候:http://localhost:8000/8-1.路由参数.html#/user/1
点击用户2时候:http://localhost:8000/8-1.路由参数.html#/user?userId=2
<script>
var UserP = {
template:`
<div>我是用户111</div>
`,
created(){
//抛出来俩个对象挂在到了vue实例对象中$route和$router
console.log(this.$route.params.id);//1
}
}
var UserQ = {
template:`
<div>我是用户222</div>
`,
created(){
console.log(this.$route.query.userId);//2
}
}
//配置路由对象
var router = new VueRouter({
routes : [
{ //动态路由参数,以冒号开头
path : "/user/:id",
name : "user1",
component : UserP
},
{
path : "/user",
name : "user2",
component : UserQ
}
]
})
//引入vue-router模块,就有了两个全局组件,router-link 和 router-view
//router-view是路由匹配组件的出口
var App = {
template:`
<div>
<router-link :to="{name:'user1',params:{id:1}}">用户1</router-link>
<router-link :to="{name:'user2',query:{userId:2}}">用户2</router-link>
<router-view></router-view>
</div>
`,
}
</script>
7.路由嵌套
<script>
var Home = {
template:`
<div>
我是首页
</br>
<router-link to="/home/song">歌曲</router-link>
<router-link to="/home/movie">电影</router-link>
<router-view></router-view>
</div>
`
}
var Song = {
template:`
<div>
我是歌曲页
</div>
`
}
var Movie = {
template:`
<div>
我是电影页
</div>
`
}
//配置路由对象
var router = new VueRouter({
routes : [
{ //动态路由参数,以冒号开头
path : "/home",
name : "home",
component : Home,
children : [
{
path : "song",
component : Song,
},
{
path : "movie",
component : Movie,
}
]
}
]
})
var App = {
template:`
<div>
<router-link :to="{name:'home'}">首页</router-link>
<router-view></router-view>
</div>
`,
}
</script>
8.动态路由匹配
<script>
var Timeline = {
template:`
<div id=""timeline>
<router-link :to="{name:'comDesc',params:{id:'frontend'}}">前端</router-link>
<router-link :to="{name:'comDesc',params:{id:'backend'}}">后端</router-link>
<router-view></router-view>
</div>
`,
}
var Pins = {
template:`
<div>我是沸点</div>
`
}
//提醒一下,当使用路由参数时,例如从 /user/foo 导航到 /user/bar,
//原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。
//不过,这也意味着组件的生命周期钩子不会再被调用。
//复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch (监测变化) $route 对象:
var ComDesc = {
data(){
return {
msg : ""
}
},
template:`
<div>我是{{msg}}</div>
`,
created(){
console.log(111);
this.msg = "前端"
},
watch: {
'$route' (to, from){
// 对路由变化作出响应...
// 发送ajax请求
console.log(to);
console.log(from);
if(to.params.id == "frontend"){
this.msg = "前端"
}else if(to.params.id == "backend"){
this.msg = "后端"
}
}
}
}
//配置路由对象
var router = new VueRouter({
mode : "history", //把url中的#去掉
routes : [
{ //动态路由参数,以冒号开头
path : "/timeline",
component : Timeline,
children : [
{
name : "comDesc",
path : "/timeline/:id",
component : ComDesc
}
]
},
{
path : "/pins",
component : Pins
}
]
})
var App = {
template:`
<div>
<router-link to="/timeline">首页</router-link>
<router-link to="/pins">沸点</router-link>
<router-view></router-view>
</div>
`,
}
new Vue({
el : "#app",
data(){
return {
}
},
template:`
<App/>
`,
router,
components : {
App
}
})
</script>
9.路由重定向
重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b:
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
10.keep-alive在路由中的使用
使用keep-alive内置组件可以在组件切换的过程中把组件的状态保存起来,不会反复的创建销毁组件
下面例子中,点击我是沸点会让字体变红,如果不使用keep-alive的话组件切到首页再切回沸点的时候,之前的字体变红状态就会消失。
var Timeline = {
template:`
<div id=""timeline>
我是首页
</div>
`,
created(){
console.log("首页组件创建了");
},
mounted(){
console.log("首页组件dom加载了");
},
destroyed(){
console.log("首页组件销毁了");
}
}
var Pins = {
template:`
<div>
<h3 @click="handler">我是沸点</h3>
</div>
`,
methods : {
handler(e){
e.target.style.color = "red"
}
},
created(){
console.log("沸点组件创建了");
},
mounted(){
console.log("沸点组件dom加载了");
},
destroyed(){
console.log("沸点组件销毁了");
}
}
//配置路由对象
var router = new VueRouter({
routes : [
{ //动态路由参数,以冒号开头
path : "/timeline",
component : Timeline
},
{
path : "/pins",
component : Pins
}
]
})
var App = {
template:`
<div>
<router-link to="/timeline">首页</router-link>
<router-link to="/pins">沸点</router-link>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
`,
}