VUE04--{路由}
2018-08-13 本文已影响6人
MickeyMcneil
1.路由
<!-- 1.引入路由文件 -->
<script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 7.设置跳转，router-link(渲染成a标签)，to属性(渲染成href) -->
<ul>
<li><router-link to="/index">首页</router-link></li>
<li><router-link to="/product">产品</router-link></li>
</ul>
<!-- 6.通过router-view挖坑，路径匹配的组件会渲染在坑里 -->
<router-view></router-view>
</div>
<script>
// 2.准备路由需要的组件
var index = Vue.component("index", {
template: `<div>我是首页</div>`
})
var product = Vue.component("product", {
template: `<div>我是商品页</div>`
})
// 3.创建路由对象，在里面配置路由规则
var router = new VueRouter({
// 4.通过routes配置路由规则，routes(数组)，其中放对象，每个对象包含name(路由规则的名称)/path(路径)/component(路径对应的组件)
routes: [
{name: 'index', path: '/index', component: index},
{name: 'product', path: '/product', component: product}
]
})
var vm = new Vue({
el: "#app",
// 5.在vue实例中注入路由，这样整个应用就可以使用路由
router: router,
})
</script>
注意
1.routes、routes、routes，防范拼写错误。
2.监听路由参数
<div id="app">
<!-- 设置跳转-->
<ul>
<li><router-link to="/index">首页</router-link></li>
<li><router-link to="/product/233">产品</router-link></li>
<li><router-link to="/product/244">产品</router-link></li>
<li><router-link to="/product/255">产品</router-link></li>
</ul>
<!-- 挖坑渲染 -->
<router-view></router-view>
</div>
<script>
// 准备组件
var index = Vue.component("index", {
template: `<div>我是首页</div>`
})
var product = Vue.component("product", {
template: `
<div>
<div>我是商品页，商品编号是{{$route.params.id}}</div>
<p>{{allProduct}}</p>
</div>
`,
data () {
return {
allProduct: "",
}
},
mounted () {
// 2.在js中获取路由参数，通过this.$route.params.参数名
console.log(this.$route.params.id);
console.log(this.$route);
},
watch: {
// 3.to表示你要去的路由对象，from表示你从哪个路由对象来
"$route" (to, from) {
console.log(to);
console.log(from);
if (to.params.id === '233') {
this.allProduct = "233对应的商品";
} else if (to.params.id === '244') {
this.allProduct = "244对应的商品";
} else {
this.allProduct = "255对应的商品";
}
}
}
})
// 创建路由对象
var router = new VueRouter({
// 配置路由规则
routes: [
{name: 'index', path: '/index', component: index},
// 1.路由加参数的方法 :参数名
{name: 'product', path: '/product/:id', component: product}
]
})
var vm = new Vue({
el: "#app",
// 实例注入
router: router,
})
</script>
3.嵌套路由、编程式导航
<div id="app">
<!-- 设置跳转-->
<div>
<router-link to="/product">产品</router-link>
</div>
<!-- 挖坑渲染 -->
<router-view></router-view>
</div>
<script>
// 2.准备子路由组件
var toys = Vue.component("toys", {
template: `<div>我是玩具</div>`
})
var product = Vue.component("product", {
// 3.给子路由挖坑
template: `
<div>
<div>我是商品页</div>
<button @click="jumpTo">查看</button>
<router-view></router-view>
</div>
`,
methods: {
jumpTo() {
// 4.使用子路由
this.$router.push({ name: "toys" });
console.log(this.$router);
}
},
})
// 创建路由对象
var router = new VueRouter({
// 配置路由规则
routes: [
{
name: 'product', path: '/product/', component: product,
// 1.定义子路由
children: [
{ name: 'toys', path: '/toys', component: toys }
]
}
]
})
var vm = new Vue({
el: "#app",
// 实例注入
router: router,
})
</script>
4.路由重定向
<div id="app">
<!-- 设置跳转-->
<div>
<router-link to="/product">产品</router-link>
</div>
<!-- 挖坑渲染 -->
<router-view></router-view>
</div>
<script>
var product = Vue.component("product", {
template: `
<div>
我是商品页
</div>
`,
})
// 创建路由对象
var router = new VueRouter({
// 配置路由规则
routes: [
{name: 'product', path: '/product/', component: product},
// 1.路由重定向
{name: 'default', path: '*', redirect: '/product'},
]
})
var vm = new Vue({
el: "#app",
// 实例注入
router: router,
})
</script>
