vue.js路由
Vue的路由:本质也是一个组件,具体步骤如下:
1、定义路由组件
const Home = { template: '<div>首页</div>' } const News = { template: '<div>新闻</div>' }
2、定义路由并添加映射路径
const routes = [ //将/home路径设置为默认路径---路由重定向 { path: '/', redirect: '/home' }, { path: '/home', component: Home }, { path: '/news', component: News } ]
3、创建 router 实例,然后传 `routes` 配置
const router = new VueRouter({ routes // (缩写)相当于 routes: routes })
4、创建和挂载根实例
var vm = new Vue({ el: '#box', data: {}, // 将路由添加到Vue中 router })
这样,路由就启动了!
以上,步骤2和步骤3可以合并,格式如下:
const router = new VueRouter({ routes:[ {定义路径,component:{3.定义组件}}, {定义路径,component:{3.定义组件}}, ......, {定义路径,component:{3.定义组件}} ] })
5、使用 router-link 标签来做路由的导航;通过传入 `to` 属性指定链接;<router-link> 默认会被渲染成一个 `<a>` 标签
<router-link to="/home">home</router-link>
6、使用 router-view 标签来做路由的出口,渲染页面
<!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view>
7、定义路由的子路径,类似于组件中的子组件;不同的是这里不是使用components标签;而是使用的children标签,children标签是一个数组,里面可能包含若干字子路径。
// 2. 定义路由 const routes = [ { path: '/', redirect: '/home' }, { path: '/home', component: Home,
//用来定义子路由 children:[ { path: '/home/login', component: Login}, { path: '/home/reg', component: Reg} ] }, { path: '/news', component: News} ]
8、组件只能包含一个div标签;并且所有的子路由都需要包含在父路由中。即需要在父路由模板中使用 router-link导航 和 router-view渲染。
<template id="home"> <!-- 注意:组件只能有一个根元素,所以我们包装到这个div中 --> <div> <h2>首页</h2> <router-link to="/home/login">登录</router-link> <router-link to="/home/reg">注册</router-link> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> </template>
9、路由传递参数
//1、重新创建一个组件 <template id="NewsDetail"> <div> 新闻详细页面 <span>{{$route.params.id}}</span> </div> </template> const NewsDetail = { template: '#NewsDetail' }; //2、注意:是在routers中增加一个新的路由,与/news同级而不是子路由 { path: '/news/:id', component: NewsDetail },
10、利用JS实现路由跳转
new Vue({ el: '#app', data: { }, // 将路由添加到Vue中 router, methods: { fn1() { // 通过路由名称跳转,配置params参数。 this.$router.replace({ name: 'index', params: { id: Math.random() } }); }, fn2() { // 直接跳转路由地址,参数直接带在路径中。 this.$router.push(`/news/${Math.random()}`); }, fn3() { // 通过路由地址进行跳转,配置query参数。
//这是路由中的配置template: '<div>用户:{{$route.query.userId}}</div>'
this.$router.push({ path: '/user', query: { userId: 321 } }); }, fn4() { console.log(this.$router)
//前进一页,参数n决定前进或后退几页 this.$router.go(1) }, fn5() {
//前进一页 this.$router.forward() }, fn6() {
//后退一页 this.$router.go(-1) }, fn7() {
//后退一页 this.$router.back() }, } })
11、通过watch可以实现路由的监听
watch: { // 监听路由跳转。 $route(newRoute, oldRoute) { console.log('watch', newRoute, oldRoute) }, }