1.路由初体验
<!DOCTYPE html>
<html lang="en">
<head>
<title>路由router</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./vue.js"></script>
<!-- 1.引入路由文件 -->
<script src="./vue-router.js"></script>
</head>
<body>
<div id="app">
<ul>
<!-- vue路由中通过router-link去做跳转,它有一个to属性,to属性的值必须和
path的路径相对应
router-link将来会被渲染成为a标签,他的to属性会被渲染成a标签的href属性,
但他的值前面会加一个#,变为锚点
-->
<li>
<router-link to="/index">首页</router-link>
</li>
<li>
<router-link to="/productType">水果</router-link>
</li>
<li>
<router-link to="/productType">蔬菜</router-link>
</li>
<li>
<router-link to="/productType">肉类</router-link>
</li>
</ul>
<!-- 6.通过router-view挖坑,路径匹配到的组件都会渲染到这个坑里面来 -->
<router-view></router-view>
</div>
<script>
// 2.准备路由需要的文件
var index = Vue.component('index', {
template: '<div>首页</div>'
})
var productType = Vue.component('productType', {
template: '<div>这里显示商品编号</div>'
})
// 3.创建路由对象,在这个对象里面去配置路由规则
var router = new VueRouter({
// 4.通过routes属性配置路由规则,它是一个数组,数组中放的是对象,每个对象对应一条规则,并且每个对象里面都包含有name(表示路由规则的名称)/path(表示路径)/component(表示路径对应的组件)
routes: [{
name: 'index',
path: '/index',
component: index
}, {
name: 'productType',
path: '/productType',
component: productType
}]
})
var vm = new Vue({
el: '#app',
// 5.在vue实例中注入路由,这样整个应用程序都会有路由了
router,
data: {
}
})
</script>
</body>
</html>
2.路由参数
HTML 中获取参数方法:
<ul>
<li>
<router-link to="/index">首页</router-link>
</li>
<li>
<router-link to="/productType/11">水果</router-link>
</li>
<li>
<router-link to="/productType/22">蔬菜</router-link>
</li>
<li>
<router-link to="/productType/33">肉类</router-link>
</li>
</ul>
routes: [{
// 路由加参数的方法:参数名
name: 'index',
path: '/index',
component: index
}, {
name: 'productType',
path: '/productType/:id',
component: productType
}]
var productType = Vue.component('productType', {
// 在html 中获取路由参数 通过$route.params 参数名
template: '<div>这里显示商品编号{{$route.params.id}}</div>'
})
JS 中获取参数方法:
var productType = Vue.component('productType', {
// 在html 中获取路由参数 通过this.$route.params 参数名
template: '<div>这里显示商品编号{{$route.params.id}}</div>',
// 在js中获取路由参数通过this.$route.params.参数名
mounted() {
console.log(this.$route.params.id)
},
})