路由的创建
路由：根据用户请求实现对应组件的内容展示。
路由的作用：
1、在vue中，只能路由映射来实现组件内容的展示。
2、映射就是指对应：一个路由对应着一个组件。
路由的使用步骤：
Vue Router使用指南
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./js/vue2.js"></script>
<!-- 1.引入vue-router.js -->
<script src="./js/vue-router.js"></script>
</head>
<body>
<div id="app">
<h3>指定路由所映射组件的展示区域</h3>
<!-- <a href="#/index">首页</a>
<a href="#/login">登陆页</a> -->
<!-- 8.用 router-link 组件来导航 -->
<!-- router-link后期 会被渲染为a标签
to:就是href属性
路径会被渲染为锚链接 -->
<router-link to="/index">首页</router-link>
<router-link to="/login">登陆页</router-link>
<!-- 7.指定路由所映射组件的展示区域 -->
<router-view></router-view>
</div>
<script>
// 5.创建路由所映射的组件
// var Index = Vue.component('index',{
// template:'<div>我是首页</div>'
// })
var Index = {
template:'<div>我是首页123</div>'
}
var login = Vue.component('login',{
template:'<div>我是登陆页</div>'
})
// 2.创建路由对象
var router = new VueRouter({
// 3.通过routes创建路由配置，它是一个数组，里面的每一个值都单独的具体的一个一个的路由配置对象
routes:[
// 4.配置具体的路由，这种配置一般常见的属性有：
// name:当前路由名称
// path:路由路径
// component:当前路由所映射的组件对象
{
name:'Index',
path:'/index',
component:Index
},
{
name:'Login',
path:'/login',
component:login
}
]
})
var vm = new Vue({
el: '#app',
// 6.注入路由,从而让整个应用都有路由功能
router,
data: {
}
})
</script>
</body>
</html>
注：
VueRouter:路由构造函数
routes:路由配置数组
router:注入路由，vm实例中的router挂载成员
router-view:路由映射组件展示区域，一个组件中一般只有一个直接子router-view
router-link:超链接–声明式导航
$router:实现路由跳转
$route:获取路由参数
路由传参：
传递参数的作用：
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如：我们有一个User组件，对于所有ID各不相同的用户，都要使用这个组件来渲染。
如何获取路由参数：
通过$route可以获取路由参数，可以在组件中mounted钩子函数中获取路由参数，这个$route中有一个params对象，里面就是当前的参数对象。
重大问题：
当使用路由参数时，例如从/product/1 导航到/product/2 ，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用会更高效。
复用组件时，路由参数的变化做出响应时，可简单的watch $route 对象。
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./js/vue2.js"></script>
<!-- 1.引入js -->
<script src="./js/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 6.添加路由链接 -->
<router-link to="/index">首页</router-link>
<!-- 根据路由配置传递参数 -->
<router-link to="/product/1">电器</router-link>
<router-link to="/product/2">水果</router-link>
<router-link to="/product/3">服装</router-link>
<!-- 5.添加组件展示区域 -->
<router-view></router-view>
</div>
<script>
// 2.创建组件
var Index = Vue.component('index', {
template: '<div>首页</div>'
})
var Product = Vue.component('product', {
template: `<div>
<p>产品</p>
<p>{{info}}</p>
</div>`,
data() {
return {
info: '??'
}
},
// 通过watch来监听路由参数的变化
//同一个路由参数变化的时候触发
watch: {
'$route'(to, from) {
var id = to.params.id
if (id == 1) {
this.info = '这是电器相关的分类数据'
} else if (id == 2) {
this.info = '这是水果相关的分类数据'
} else if (id == 3) {
this.info = '这是服装相关的分类数据'
}
}
},
//路由切换的时候触发
mounted() {
console.log(this.$route)
// this.$route可以获取路由相关的数据，如参数
var id = this.$route.params.id
if (id == 1) {
this.info = '这是电器相关的分类数据'
} else if (id == 2) {
this.info = '这是水果相关的分类数据'
} else if (id == 3) {
this.info = '这是服装相关的分类数据'
}
}
})
// 3.创建路由对象
var router = new VueRouter({
routes: [
{
path: '/index',
component: Index
},
{
// 添加路由的 参数配置,它决定了后期获取参数时的变量的名称
// :是参数的标识，后期传递参数是不用添加:
path: '/product/:id',
component: Product
}
]
})
var vm = new Vue({
el: '#app',
// 4.注入
router,
data: {
}
})
</script>
</body>
</html>
嵌套路由：
实际中的应用界面，通常由多层嵌套的组件组合而成。同样的，URL中各段动态路径也按某种结构对应嵌套的各层组件。
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./js/vue2.js"></script>
<!-- 1.引入js -->
<script src="./js/vue-router.js"></script>
</head>
<body>
<div id="app" style='border:1px solid red'>
<!-- 6.添加路由链接 -->
<router-link to="/index">首页</router-link>
<!-- 根据路由配置传递参数 -->
<router-link to="/product/1">电器</router-link>
<router-link to="/product/2">水果</router-link>
<router-link to="/product/3">服装</router-link>
<!-- 5.添加组件展示区域 -->
<router-view></router-view>
</div>
<script>
// 2.创建组件
var Index = Vue.component('index', {
template: '<div>首页</div>'
})
var dian = Vue.component('dian', {
template: '<div>电器分类的详细信息</div>',
mounted(){
console.log(this.$route)
}
})
var shui = Vue.component('shui', {
template: '<div>水果分类的详细信息</div>'
})
var fu = Vue.component('fu', {
template: '<div>服装分类的详细信息</div>'
})
var Product = Vue.component('product', {
template: `<div style='border:1px solid green'>
<p>产品</p>
<p>{{info}}</p>
<button @click='show'>单击显示详细分类数据</button>
<router-view style='border:1px solid blue'></router-view>
</div>`,
data() {
return {
info: '??',
id:''
}
},
methods:{
show(){
// 实现嵌套路由的跳转
var id = this.$route.params.id
if(id == 1){
// 显示电器详细信息
// this.$router.push({name:'Dian',params:{username:'jackandrose'}})
// path进行路由跳转的时候需要添加之前的参数
this.$router.push({path:`${id}/dian`,query:{username:'jackandrose'}})
}else if(id == 2){
// 显示电器详细信息
this.$router.push({name:'Shui'})
}else if(id == 3){
// 显示电器详细信息
this.$router.push({name:'Fu'})
}
}
},
// 通过watch来监听路由参数的变化
watch: {
'$route'(to, from) {
var id = to.params.id
if (id == 1) {
this.info = '这是电器相关的分类数据'
} else if (id == 2) {
this.info = '这是水果相关的分类数据'
} else if (id == 3) {
this.info = '这是服装相关的分类数据'
}
}
},
mounted() {
console.log(this.$route)
// this.$route可以获取路由相关的数据，如参数
var id = this.$route.params.id
if (id == 1) {
this.info = '这是电器相关的分类数据'
} else if (id == 2) {
this.info = '这是水果相关的分类数据'
} else if (id == 3) {
this.info = '这是服装相关的分类数据'
}
}
})
// 3.创建路由对象
var router = new VueRouter({
routes: [
{
path: '/index',
component: Index
},
{
// 添加路由的 参数配置,它决定了后期获取参数时的变量的名称
// :是参数的标识，后期传递参数是不用添加:
path: '/product/:id',
component: Product,
// 定义嵌套路由
children:[
{
name:'Dian',
// 如果有/，那就是一级路由--根路由
// 嵌套路由的path不要添加/，虽然没有错误，但是去破坏了路由的嵌套层次结构
path:'dian',
component:dian
},{
name:'Shui',
path:'shui',
component:shui
},
{
name:'Fu',
path:'fu',
component:fu
}
]
}
]
})
var vm = new Vue({
el: '#app',
// 4.注入
router,
data: {
}
})
</script>
</body>
</html>
302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
