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)
  },
}