路由重定向
//第一种
{
name: 'default',
path: '*',
redirect: '/index'
}
//第二种
{
name: 'default',
path: '*',
redirect: {
name: 'index'
}
<!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/11">水果</router-link>
</li>
<li>
<router-link to="/productType/22">蔬菜</router-link>
</li>
<li>
<router-link to="/productType/33">肉类</router-link>
</li>
</ul>
<!-- 6.通过router-view挖坑,路径匹配到的组件都会渲染到这个坑里面来 -->
<router-view></router-view>
</div>
<script>
// 2.准备路由需要的文件
var index = Vue.component('index', {
template: '<div>首页</div>'
})
var cookBook = Vue.component('cookBook', {
template: '<div>我这里有很多的食谱,欢迎查看</div>'
})
var productType = Vue.component('productType', {
data() {
return {
allProduct: ''
}
},
// 在html 中获取路由参数 通过this.$route.params 参数名
template: `
<div>这里显示商品编号{{$route.params.id}}
<p>{{allProduct}}<button @click='jumpTo'>查看食谱</button></p>
<router-view></router-view>
</div>`,
methods: {
jumpTo() {
//通过$router来跳转
this.$router.push({
name: 'cookBook'
})
}
},
// 在js中获取路由参数通过this.$route.params.参数名
mounted() {
console.log(this.$route.params.id)
},
watch: {
//to 表示你将要去的路由对象,from表示你从哪个路由对象来
'$route' (to, from) {
if (to.params.id === '11') {
this.allProduct = '西瓜/香蕉/苹果'
} else if (to.params.id === '22') {
this.allProduct = '白菜/胡萝卜/香菇'
} else {
this.allProduct = '鸡肉/羊肉/鸭肉'
}
}
}
})
// 3.创建路由对象,在这个对象里面去配置路由规则
var router = new VueRouter({
// 4.通过routes属性配置路由规则,它是一个数组,数组中放的是对象,每个对象对应一条规则,并且每个对象里面都包含有name(表示路由规则的名称)/path(表示路径)/component(表示路径对应的组件)
routes: [{
// 路由加参数的方法:参数名
// 嵌套路由的创建通过children属性,它是一个数组,数组中放的是对象,每个对象对应一条规则
name: 'index',
path: '/index',
component: index
}, {
name: 'productType',
path: '/productType/:id',
component: productType,
children: [
//嵌套中的path不能加/
{
name: 'cookBook',
path: 'cook_book',
component: cookBook
}
]
},
//路由重定向
// {
// name: 'default',
// path: '*',
// redirect: '/index'
// },
{
name: 'default',
path: '*',
redirect: {
name: 'index'
}
}
]
})
var vm = new Vue({
el: '#app',
// 5.在vue实例中注入路由,这样整个应用程序都会有路由了
router,
data: {
}
})
</script>
</body>
</html>