Vue Router路由安装配置以及实现页面跳转

一、Vue Router路由安装配置

（vscode中） 1.先安装 npm install vue-router或cnpm install vue-router或yarn add vue-router 因为我的在创建项目的时候yarn有点问题选择的包是npm 我用到的命令是 npm install --save vue-router 安装完之后去检查package.json是否安装上 2.安装完之后 就要在src根目录下新建router.js 路由管理 配置路由信息 如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能： 在router.js中引用这个代码

import Vue from vue
import VueRouter from vue-router

Vue.use(VueRouter)

3. 建好路由之后 该去建页面 在src下新建一个views 在views下新建一个文件夹Home 在Home文件夹中新建一个页面 index.vue 在页面写下你要展示在页面的内容 或者导入组件 这是我的目录结构 我是导入的组件 可以直接在这个页面写东西不导入组件 都可以 我在组件也只写了一点内容 4.建好页面要在router.js中进行页面的配置 ①先要引入页面

import Home from ./views/Home/

②new实例 routes这个关键字 是个数组对象 来配置路由信息呢 第一组是默认纸箱 一打开之后的那个页面显示 只出现一次 path j

export default new VueRouter ({
          
   
    // 配置路由信息
    routes: [
        {
          
   
          path: /,
          redirect: /home  //设置默认指向
        },
        {
          
   
          path: /home,
          component: Home
        }
      ]
})

5.配置完路由和页面 就需要把内容渲染到页面 想显示在哪个页面就在页面

<router-view></router-view>

router-view 用于渲染匹配到的组件

6.全部完成 最后要在main.js中配置 main.js是加载各种公共组件的

导入router.js 在new实例中增加router

然后在页面最终效果 我是在app.vue中试的

二、Vue Router 实现页面跳转

1.按照上面的方式在新建一个页面 在views中在建了一个list文件夹 list下在建一个index.vue

2.去router.js中配置一下这个页面 引入 配置路由信息

3.全部配置完在你想要展示的页面写切换

router-link 是一个组件，它默认会被渲染成一个带有链接的a标签，通过to属性指定链接地址。

<router-link to="/">[text]</router-link>

又通过router-view来渲染出来

补： routes也可以进行路由嵌套

想要在那个页面写嵌套 就在那个路由下面接着写个children：[] Vue中使用children实现路由的嵌套使用 children 属性，实现子路由

同时，子路由的 path 前面，不要带 “/” ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址

子路由也可以设置默认指向

这里依然用的组件 所以要导入组件 或者页面也可以 渲染完就可以在页面切换