1.路由基本实现
因为是基于vue的前端路由 所以需要先引入Vue 之后再引用vue-router.
1.首先要找到示例vue控制的区域 留下一个路由占位符 <router-view></router-view> 显示模板的内容
2.在vue中有一个新的标签 <router-link to="/user">User</router-link> 和a标签相似 to="/user 就等价于 herf=’#/user’
3.要在script中写跳转的模板
4.将模板挂载到示例的路由上
5.再将路由挂载到示例的vue对象上
代码如下
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<router-link to="/user">User</router-link>
<router-link to="/page">Page</router-link>
<!-- 路由占位符 显示模板中的内容-->
<router-view></router-view>
</div>
<script>
//写两个路由的模板
const User = {
template: '<h1>User页面</h1>'
}
const Page = {
template: '<h1>Page页面</h1>'
}
//路由规则 有两个属性 一个是地址path 另一个是模板component
const router = new VueRouter({
routes: [{
path: '/user',
component: User
},
{
path: '/page',
component: Page
}
]
})
//示例一个vue 将服务器挂载到vm中
const vm = new Vue({
el: '#app',
data: {},
router: router
})
</script>
</body>
2.路由的重定向
路由的重定向十分简单 需要在你规定的路由上加上redirect 后面写地址 就可以
const router = new VueRouter({
routes: [{
path: '/',
redirect: '/user'
}
]
})
3.路由嵌套
1.要在被嵌套路由的模板上留下占位符 <router-view></router-view> 显示嵌套模板的内容
2.写被嵌套的模板
3.因为是嵌套路由 在被规定路由规则中找到被嵌套的路由 在后面添加children数组 数组中写嵌套的路由
<script src="lib/vue_2.5.22.js"></script>
<script src="lib/vue-router_3.0.2.js"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<router-link to="/user">User</router-link>
<router-link to="/page">Page</router-link>
<!-- 路由占位符 显示模板中的内容-->
<router-view></router-view>
</div>
<script>
//写两个路由的模板
const User = {
template: '<h1>User页面</h1>'
}
const Page = {
template: `
<div >
<h1>Page页面</h1>
<hr />
<router-link to="/page/table1">table1</router-link>
<router-link to="/page/table2">table2</router-link>
<!-- 路由占位符 显示模板中的内容-->
<router-view></router-view>
</div>
`
}
const table1 = {
template: '<h4>table1页面</h4>'
}
const table2 = {
template: '<h4>table2页面</h4>'
}
//路由规则 有两个属性 一个是地址path 另一个是模板component
const router = new VueRouter({
routes: [{
path: '/',
redirect: '/user'
},
{
path: '/user',
component: User
},
{
path: '/page',
component: Page,
children: [{
path: '/page/table1',
component: table1
},
{
path: '/page/table2',
component: table2
}
]
}
]
})
//示例一个vue 将服务器挂载到vm中
const vm = new Vue({
el: '#app',
data: {},
router: router
})
</script>
</body>
4.动态路由的匹配
在跳转的时候有可能会出现/user/1 /user/2 这种前面一样 只有后面有一些区别的路径 这个时候可以用 /user/:id 来表示 后面设置 props: true 在模板中想用的时候 props: [‘id’], 来调用
<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 = {
props: ['id'],
template: '<h1>User 组件 -- 用户id为: {{id}}</h1>'
}
const Register = {
template: '<h1>Register 组件</h1>'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
{ path: '/', redirect: '/user'},
{ path: '/user/:id', component: User, props: true },
{ path: '/register', component: Register }
]
})
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {},
// 挂载路由实例对象
// router: router
router
})
</script>
如果想传递一些静=静态的数据
<script>
const User = {
props: ['id', 'uname', 'age'],
template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
}
const Register = {
template: '<h1>Register 组件</h1>'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
{ path: '/', redirect: '/user'},
{ path: '/user/:id', component: User, props: { uname: 'lisi', age: 20 } },
{ path: '/register', component: Register }
]
})
如果想动静结合 route.params.id可获取动态的id
<script>
const User = {
props: ['id', 'uname', 'age'],
template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
}
const Register = {
template: '<h1>Register 组件</h1>'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
{ path: '/', redirect: '/user' },
{
path: '/user/:id',
component: User,
props: route => ({ uname: 'zs', age: 20, id: route.params.id })
},
{ path: '/register', component: Register }
]
})
5.命名路由
命名路由只不过是另一种书写方式而已
在路由规定中加入了name’属性
传地址的时候可以直接通过传递name来跳转路由
<div id="app">
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>
<router-link to="/register">Register</router-link>
<!-- 路由占位符 -->
<router-view></router-view>
</div>
<script>
const User = {
props: ['id', 'uname', 'age'],
template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
}
const Register = {
template: '<h1>Register 组件</h1>'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
{ path: '/', redirect: '/user' },
{
// 命名路由
name: 'user',
path: '/user/:id',
component: User,
props: route => ({ uname: 'zs', age: 20, id: route.params.id })
},
{ path: '/register', component: Register }
]
})
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {},
// 挂载路由实例对象
// router: router
router
})
6.编程式导航
用函数的方式来进行页面的跳转
this.
r
o
u
t
e
r
.
g
o
(
−
1
)
退
后
页
面
t
h
i
s
.
router.go(-1) 退后页面 this.
router.go(−1)退后页面this.router.push(’/userinfo/’)到这个页面中去
<script>
const User = {
props: ['id', 'uname', 'age'],
template: `<div>
<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>
<button @click="goRegister">跳转到注册页面</button>
</div>`,
methods: {
goRegister() {
this.$router.push('/register')
}
},
}
const Register = {
template: `<div>
<h1>Register 组件</h1>
<button @click="goBack">后退</button>
</div>`,
methods: {
goBack() {
this.$router.go(-1)
}
}
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
{ path: '/', redirect: '/user' },
{
// 命名路由
name: 'user',
path: '/user/:id',
component: User,
props: route => ({ uname: 'zs', age: 20, id: route.params.id })
},
{ path: '/register', component: Register }
]
})
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {},
// 挂载路由实例对象
// router: router
router
})
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
