Vue使用router

1、安装

npm i vue-router -s

2、在src目录下的components里面创建组件page1、page2、page3

<template>
    <div>
        <h1>page1</h1>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "我是page1组件"
            }
        }
    }
</script>

<template>
    <div>
        <h1>page2</h1>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "我是page2组件"
            }
        }
    }
</script>

<template>
    <div>
        <h1>page3</h1>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "我是page3组件"
            }
        }
    }
</script>

3、定义和

在App.vue页面定义 router-link 和 router-view

<template>
  <div id="app">
    <!-- router-link 定义点击后导航到哪个路径下 -->
    <router-link to="/page1">Page1</router-link>
	<router-link to="/page2">Page2</router-link>

    <!-- 对应的组件内容渲染到router-view中 -->
    <router-view></router-view>   
  </div>
</template>

<script>
export default {
  
}
</script>

4、创建router.js

在 src目录下新建router目录，里面创建index.js定义router, 就是定义 路径到 组件的 映射。

import Vue from "vue";
import VueRouter from "vue-router";

// 引入组件
import page1 from "../components/page1.vue";
import page2 from "../components/page2.vue";

// 要告诉 vue 使用 vueRouter
Vue.use(VueRouter);

const routes = [
    {
        path:"/page1",
        component: page1
    },
    {
        path: "/page2",
        component: page2
    },
  	// 换种方式引入组件
  	{
		path: '/page3',
		component: r => require.ensure([], () => r(require('../components/page3.vue')), 'page3'),
	}
]

var router =  new VueRouter({
    routes,
  	mode: 'history'//跳转时候链接地址会添加“#”，导致无法跳转，添加mode：'history'
})
export default router;

5、注册实例

把路由注入到根实例中，启动路由。这里其实还有一种方法，就像vuex store 注入到根实例中一样，我们也可以把vueRouter 直接注入到根实例中。在main.js中引入路由，注入到根实例中。

import Vue from 'vue'
import App from './App.vue'

// 引入路由
// import router 的router 一定要小写， 不要写成Router, 否则报 can't match的报错
import router from './router';
Vue.use(router);  

new Vue({
  el: '#app',
  router,  // 注入到根实例中
  render: h => h(App)
})

6、 重定向默认页面

现在点击页面page1和page2可以来回切换，但是首次进入页面是空白的，因为首次进入时候没有路径是空的，没有指定页面，这时候需要重定向页面。

const routes = [
  	// 重定向
    {
        path: '/', 
        redirect: '/page1' 
    },
    {
        path:"/page1",
        component: page1
    },
    {
        path: "/page2",
        component: page2
    }
]

7、嵌套路由

嵌套路由就是
进入到page1页面的时候，它下面还有分类，如手children1页面，children2页面，children3页面
当我们点击各个分类的时候，它还是需要路由到各个部分，如children1，它肯定到对应到children1页面。

首先，在page1页面上定义三个router-link 标签用于导航，然后再定义一个router-view标签，用于渲染对应的组件。router-link 和router-view 标签要对应。 修改page1.vue 组件和router如下。

<template>
    <div>
  		<!-- router-link 的to属性要注意，路由是先进入到page1,然后才进入相应的子路由如 children1,所以书写时要把 page1 带上 -->
        <h1>page1</h1>
        <p>
            <router-link to="/page1/children1">children1</router-link>
            <router-link to="/page1/children2">children2</router-link>
            <router-link to="/page1/children3">children3</router-link>
        </p>
        <router-view></router-view>
    </div>
</template>

配置page1的router，它的children中对应的路由path 是空 ‘’，完整的childrens 如下：

children: [
    {
        path: "children1",
        component: children1
    },
    {
        path: "children2",
        component: children2
    },
    {
        path: "children3",
        component: children3
    },    
    {
      	// 当进入到page1时，下面的组件显示
        path: "",
        component: children1
    }
]