<!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>
<!-- 需要注意这里的文件 -->
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
</head>
<style>
.active{
color: red;
}
</style>
<body>
<div id="app">
<ul>
<li>
<router-link active-class='active' to='/home'>home</router-link>
</li>
<li>
<router-link active-class='active' to='/second'>second</router-link>
</li>
<li>
<router-link active-class='active' to='/user/junkai'>junkai</router-link>
</li>
<li>
<router-link active-class='active' to='/user/yiming'>yiming</router-link>
</li>
<li>
<router-link active-class='active' to='/user/siyou'>siyou</router-link>
</li>
<li>
<router-link active-class='active' to='/goods/110/TCL'>电视商品</router-link>
</li>
</ul>
<router-view></router-view>
</div>
</body>
<script>
/**
* 1. 定义好组件,可以是全局组件也可以是局部组件
* 2. 定义路线: 路径和组件的对应关系
* a. {path: '指明路径', component: '组件对象'}
* b. 定义一个重定向,防止用户输入的地址没有匹配的,提高用户体验
* 3. 定义一个VueRouter 对象
* a. 把定义好的路线和VueRouter 关联起来,提供给Vue对象使用
* b. VueRouter({'routes': routes}),参数是一个JSON对象
* 4. 将VueRouter对象注册到Vue对象中
* a. 在Vue配置信息中添加 router 关键字,值是 VueRouter对象
* 5. 在router-link组件中,如果要标记当前选中的状态,需要添加 active-class='active',active为自定义的样式
* 6. 在routes 中定义 动态路由
* {
// 匹配规则 ‘/user/自定义’, 如果是‘/user’是不匹配
// 使用 this.$route.params.username 来获取 url中的变量
path: '/user/:username',
component: UserComponent
}
*
*/
var HomeComponent = Vue.component('home-component', {
// 需要在html代码里定义一个template,然后设置ID 为parentId
template: `
<div>
<div>我是Home</div>
</div>
`
});
var SecondComponent = Vue.component('second-component', {
// 需要在html代码里定义一个template,然后设置ID 为parentId
template: `
<div>
<div>我是 SecondComponent</div>
</div>
`
});
var goodsComponent = Vue.component('second-component', {
// 需要在html代码里定义一个template,然后设置ID 为parentId
template: `
<div>
<div>goodsComponent</div>
<div>{{$route.params.styleId}}</div>
<div>{{$route.params.brand}}</div>
<div></div>
</div>
`
});
var UserComponent = Vue.component('second-component', {
// 需要在html代码里定义一个template,然后设置ID 为parentId
template: `
<div>
<div>我是 UserComponent</div>
<div>{{$route.params.username}}</div>
<div>{{userInfo}}</div>
</div>
`,
data: function () {
return {
userInfo: null
}
},
mounted: function () {
var username = this.$route.params.username;
var that = this;
console.log(username);
debugger
// 模拟ajax
setTimeout(function () {
that.userInfo = {
username: 'siyou',
age: 18,
location: '长沙'
}
},1000);
}
});
// 定义了 路线,即 什么url 对应 什么组件
var routes = [{
path: '/home',
component: HomeComponent
},{
path: '/second',
component: SecondComponent
},{
// 匹配规则 /user/自定义, 如果是‘/user’是不匹配
path: '/user/:username',
component: UserComponent
},{
// 匹配规则 /user/自定义, 如果是‘/user’是不匹配
path: '/goods/:styleId/:brand',
component: goodsComponent
},{
path: '*',
redirect: '/second'
}];
var router = new VueRouter({
'routes': routes
});
var app = new Vue({
el: '#app',
data: function () {
return {
name: 'hongyang'
}
},
// 定义Vue-router
'router': router
// router
})
</script>
</html>
vue 动态路由
最新推荐文章于 2022-05-19 00:00:39 发布