vue-router 基本使用

vue-router 基本使用

路由就是指向，比如点击A指向A对应的内容

路由中有三个基本概念：route、routes、router。

1：route，他是一个单个的路由，

A----------------->AAAAAAAAAAA

2：routes，他是一个路由组，

A------------------>AAAAAAAAAAAAAAA

B------------------->BBBBBBBBBBBBBBBBBB

C-------------------->CCCCCCCCCCCCCCCC

...

3:router,他是一个机制，相当于管理者，就是一个函数，所有点击路由的事件都是经过他的处理

例子

1，页面实现：

在vue-route中有路径（path）和组件（component）如{path：'./a',component:AA}，然后有多个单个路由组成routes：

const routes = [

{ path : './a' , component : AAA},

{path ：'./b' , component : BBB}

]

再创建touter对路由进行管理，它是构成函数new vueRouter()创建，接受routes参数。

const router = new VueRouter({

routes:routes

})

配置完成后，把router实例注入到vue根实例中，就可以使用路由了

const app = new Vue({

router

}).$mount("#app")

vue-cli 创建一个项目体验一下, 当然不要忘记安装vue-router

1, 在src 目录下新建两个组件，home.vue 和 about.vue

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

<template> <div> <h1>about</h1> <p>{{aboutMsg}}</p> </div></template><script> export default { data () { return { aboutMsg: '我是about组件' } } }</script>

　　2, 在 App.vue中 定义<router-link > 和 </router-view>  

<template> <div id="app"> <img src="./assets/logo.png"> <header> <!-- router-link 定义点击后导航到哪个路径下 --> <router-link to="/home">Home</router-link> <router-link to="/about">About</router-link> </header> <!-- 对应的组件内容渲染到router-view中 --> <router-view></router-view> </div></template><script>export default { }</script>

　　3,  在 src目录下再新建一个router.js 定义router, 就是定义 路径到 组件的 映射。

import Vue from "vue";import VueRouter from "vue-router"; // 引入组件 import home from "./home.vue";import about from "./about.vue"; // 要告诉 vue 使用 vueRouter Vue.use(VueRouter);const routes = [ { path:"/home", component: home }, { path: "/about", component: about }] var router = new VueRouter({ routes})export default router;

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

import Vue from 'vue'import App from './App.vue' // 引入路由 import router from "./router.js" // import router 的router 一定要小写， 不要写成Router, 否则报 can't match的报错 new Vue({ el: '#app', router, // 注入到根实例中 render: h => h(App)})

　　5， 这时点击页面上的home 和about 可以看到组件来回切换。但是有一个问题，当首次进入页面的时候，页面中并没有显示任何内容。这是因为首次进入页面时，它的路径是 '/'，我们并没有给这个路径做相应的配置。一般，页面一加载进来都会显示home页面，我们也要把这个路径指向home组件。但是如果我们写{ path: '/', component: Home },vue 会报错，因为两条路径却指向同一个方向。这怎么办？这需要重定向，所谓重定向，就是重新给它指定一个方向，它本来是访问 / 路径，我们重新指向‘/home’, 它就相当于访问 '/home', 相应地, home组件就会显示到页面上。vueRouter中用 redirect 来定义重定向。

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