实现一个简单路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模拟路由</title>
<script src="../vue202012/vue.js"></script>
</head>
<body>
<!-- 被vue实例控制的div区域 -->
<div id="app">
<!-- 切换组件的超链接 -->
<a href="#/zhuye">主页</a>
<a href="#/keji">科技</a>
<a href="#/caijing">财经</a>
<a href="#/yule">娱乐</a>
<component :is="comName"></component>
</div>
<script>
// 主页组件
const zhuye = {
template: `<h1>主页信息</h1>`
}
// 科技组件
const keji = {
template: `<h1>科技信息</h1>`
}
// 财经组件
const caijing = {
template: `<h1>财经信息</h1>`
}
// 娱乐组件
const yule = {
template: `<h1>娱乐信息</h1>`
}
const vm = new Vue({
el: '#app',
data: {
comName: 'keji'
},
// 注册私有组件
components: {
zhuye,
keji,
caijing,
yule
}
})
// 监听window的onhashchange事件,根据获得的最新的hash值,切换要显示的组件的名称
window.onhashchange = () => {
// 通过location.hash获取到最新的hash值
// console.log(location.hash.slice(2))
vm.comName = location.hash.slice(2)
}
</script>
</body>
</html>
通过location.hash获取到最新的hash值是带有#/前缀的,所以我们要用slice()方法去掉这个前缀
注意:
<component :is="comName"></component>
:is
属性的值一定是一个字符串
效果:
上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导入 vue 文件 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 添加路由链接 -->
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
<!-- 添加路由填充位 -->
<router-view></router-view>
</div>
<script>
// 创建路由组件
const User = {
template:"<h1>User Component</h1>"
}
const Register = {
template:"<h1>Register Component</h1>"
}
// 创建路由实例对象
const router = new VueRouter({
routes:[
{path:'/user',component:User},
{path:'/register',component:Register}
]
})
var vm = new Vue({
el: '#app',
data: {},
methods: {},
// 挂载路由实例对象
// router:router ES6里面属性名和属性值一样的话可以简写为下面的
router
});
</script>
</body>
</html>
效果:
两个<router-link></router-link>
都自动转化为a标签了
上代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue202012/vue.js"></script>
<script src="../vue202012/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
<router-view></router-view>
</div>
<script>
// 创建路由组件
const User = {
template: '<h1>User</h1>'
}
const Register = {
template: `
<div>
<h1>Register</h1>
<hr/>
<!-- 子路由链接 -->
<router-link to="/register/tab1">Tab1</router-link>
<router-link to="/register/tab2">Tab2</router-link>
<!-- 子路由占位符 -->
<router-view></router-view>
</div>
`
}
// 子组件1
const tab1 = {
template: '<h3>Tab1子组件</h3>'
}
// 子组件2
const tab2 = {
template: '<h3>Tab2子组件</h3>'
}
// 创建路由实例对象
const router = new VueRouter({
routes: [
{ path: '/user', component: User },
{
// Register组件路由下面设置子路由
path: '/register', component: Register, children: [
{ path: '/register/tab1', component: tab1 },
{ path: '/register/tab2', component: tab2 },
]
}
]
})
var vm = new Vue({
el: '#app',
data: {},
methods: {},
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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导入 vue 文件 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 添加路由链接 -->
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>
<router-link to="/register">Register</router-link>
<!-- 添加路由填充位 -->
<router-view></router-view>
</div>
<script>
// 创建路由组件
const User = {
template:"<h1>User{{ $route.params.id }} Component</h1>"
}
const Register = {
template:"<h1>Register Component</h1>"
}
// 创建路由实例对象
const router = new VueRouter({
routes:[
{path:'/',redirect:'/user'},
{path:'/user/:id',component:User},
{path:'/register',component:Register}
]
})
var vm = new Vue({
el: '#app',
data: {},
methods: {},
// 挂载路由实例对象
// router:router ES6里面属性名和属性值一样的话可以简写为下面的
router
});
</script>
</body>
</html>
效果:
把之前的代码修改一下:
之前是这样传参的:
现在可以这样:
保存,效果还是一样的
这时候组件里面就不能访问id了,只能访问props对象里面提供的值:
这时候id就废了,虽然可以匹配成功,但是不能访问了,结果如下:
如何才能即得到id的值又能得到props里面的值?
props的值传一个函数
上代码:
注意这里不用写$route
,直接写route.param.id
就可以了
效果: