vue-router路由

Posted 2023-03-31 桉森屿夏

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-router路由相关的知识，希望对你有一定的参考价值。

vue-router路由

Vue Router是Vue.js官方的路由管理器（路径跳转）。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有:

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于Vue.js过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的CSS class的链接
html5历史模式或hash模式，在IE9中自动降级
自定义的滚动条行为

14.1、安装

基于第一个vue-cli进行测试学习;先查看node_modules中是否存在 vue-router
vue-router 是一个插件包，所以我们还是需要用 npm/cnpm 来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

npm install vue-router --save-dev   (安装失败用下面的)

npm install --legacy-peer-deps vue-router --save-dev

安装完之后去node_modules路径看看是否有vue-router信息有的话则表明安装成功。

14.2、 vue-router demo实例

将之前案例由vue-cli生成的案例用idea打开
清理不用的东西 assert下的logo图片 component定义的helloworld组件我们用自己定义的组件
清理代码以下为清理之后的代码 src下的App.vue 和main.js以及根目录的index.html
这三个文件的关系是 index.html 调用main.js 调用App.vue
index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>myvue</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js:

import Vue from 'vue'
import App from './App'
import router from './router' //自动扫描里面的路由配置

Vue.config.productionTip = false

new Vue(
  el: '#app',
  //配置路由
  router,
  components:  App ,
  template: '<App/>'
)

App.vue:

import Vue from 'vue'
import App from './App'
import router from './router' //自动扫描里面的路由配置

Vue.config.productionTip = false

new Vue(
  el: '#app',
  //配置路由
  router,
  components:  App ,
  template: '<App/>'
)

App.vue:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>迪师傅</h1>

    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <router-link to="/kuang">Kuang</router-link>
    <router-view></router-view>

  </div>
</template>

<script>

export default 
  name: 'App',
  components: 
  

</script>

<style>
#app 
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;

</style>

在components目录下创建一个自己的组件Content,Test,Main(这两个和Content内容一样的就不放示例代码了

Content.vue:

<template>
  <h1>内容</h1>
</template>

<script>
    export default 
        name: "Content"
    
</script>

<style scoped>

</style>

安装路由,在src目录下,新建一个文件夹 : router,专门存放路由 index.js(默认配置文件都是这个名字)

import Vue from "vue";
import VueRouter from "vue-router";
import Content from "../components/Content";
import Main from "../components/Main";
import Kuang from "../components/Kuang";

//安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter(
  routes: [
    
      //路由路径
      path: '/content',
      name: 'content',
      //跳转的组件
      component: Content
    ,
    
      //路由路径
      path: '/main',
      name: 'main',
      //跳转的组件
      component: Main
    ,
    
      //路由路径
      path: '/kuang',
      name: 'kuang',
      //跳转的组件
      component: Kuang
    
  ]
)

在main.js中配置路由

main.js:

import Vue from 'vue'
import App from './App'
import router from './router' //自动扫描里面的路由配置

Vue.config.productionTip = false

new Vue(
  el: '#app',
  //配置路由
  router,
  components:  App ,
  template: '<App/>'
)

在App.vue中使用路由

App.vue:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>迪师傅</h1>

    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <router-link to="/kuang">Kuang</router-link>
    <router-view></router-view>

  </div>
</template>

<script>

export default 
  name: 'App',
  components: 
  

</script>

<style>
#app 
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;

</style>

启动测试一下： npm run dev
项目结构图&运行效果图

测开之・《路由vue-route》

路由vue-route

安装vue-route

使用安装命令安装

npm install vue-router

在main.js中进行注册

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

直接全局的 script 标签引入

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

vue-router的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='./vue.js'></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <h1>hell app!</h1>
        <p>
            <router-link to="/login">
                <button type="button">登录页</button>
            </router-link>
            <router-link to="/home">
                <button type="button">首页</button>
            </router-link>
        </p>
        <!--路由的出口-->
        <router-view></router-view>
    </div>

    <script type="text/javascript">
        // 1、 创建组件对象
        const Login = {
            template: `<h1>登录页面</h1>`
        }

        const Home = {
            template: `<h1>项目首页</h1>`
        }
        // 2、 配置路由访问规则
        const routes = [
            {path: '/login', component:Login},
            {path:'/home', component: Home}
        ]

        // 3、 创建一个路由对象
        var  router = new VueRouter({
            routes: routes
        })

        // 4、 创建vue实例，并将路由对象挂载进去
        var vm = new Vue({
            el: "#app",
            router: router
        })
    </script>

</body>
</html>

编程式和声明式导航

声明式

<router-link to="/login">登录</router-link>

// to后面是一个对象时，要使用属性绑定
<router-link :to="{ path: '/login'}">登录</router-link>

编程式

在项目中我们有些时候需要主动去访问某个路由，比如登录成功之后，需要跳转到项目首页，那么在Vue 实例内部，你可以调用 this.$router.push，主动访问某个路由。

this.$router.push('/login')

this.$router.push({path: '/login'})

路由重定向

比如我们有一个域名，期望我们直接访问域名的时候，可以进入到登录页面，那么我们可以进行路由重定向操作。

命名路由

你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

路由命名后可以直接通过name指定路由名访问

申明式

<router-link :to="{ name: 'login'}">登录</router-link>

编程式

this.$router.push({name: 'login'})

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测开平台</title>
    <script src='./vue.js'></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <style type="text/css">

        .login{
           	width: 600px;
            height: 400px;
            box-shadow: 0 0 15px #000000;
            margin: 150px auto;

            /*设置圆角*/
            border-radius: 5px;
            /*内容居中*/
            text-align: center;

        }

        .title{
            color: #00aaff;
            font: bold 24px/30px "microsoft sans serif";
            padding: 50px 0;
        }

        /*设置输入框的样式*/
        .login input{
            width: 70%;
            height: 35px;
            margin-bottom: 30px;
            border: solid 1px #d1d1d1;
            padding: 0;
            border-radius: 3px;
        }

        /*设置input键盘输入时，边框的样式*/
        .login input:focus{
            outline: none;
            border: solid 1px #ffaa00;
        }

        /*设置按钮样式*/
        .login input[type='submit']{
            background: #00AAFF;
            color: #fff;
        }

    </style>
</head>
<body>
    <div id="app">
        <!-- 路由的出口： 访问路径时，对应的组件在页面中显示的位置 -->
        <router-view></router-view>
    </div>

    <script type="text/javascript">

        const requestB = axios.create({
            baseURL: 'http://127.0.0.1:5000',
            }
        )
        // 1、创建组件对象
        const Login = {
            template:  `
            <div class="login">
                <div class="title">接 口 自 动 化 平 台</div>
                <form action="">
                    <input type="text" v-model="loginForm.user" placeholder="  请输入用户名">
                    <input type="password" v-model="loginForm.pwd" placeholder=" 请输入密码">
                    <input type="button" @click="login" value="登录"/>
                </form>
        </div>
            `,
            data(){
                return{
                    loginForm:{
                      user: "",
                      pwd: ""
              }
                }
            },

            methods: {
                 login(){
                  requestB.post('/api/user/login', this.loginForm).then((response)=>{
                      console.log("请求成功", response.data)
                      if(response.data.msg === "账号或密码有误"){
                          alert("账号密码错误")
                      }else {
                           alert("登录成功")
                          // 获取token
                          let token = response.data.token
                          console.log(token)
                          // 把token放到localStorage中
                          window.localStorage.setItem('token', token)
                          // 跳转到首页
                          this.$router.push({name: "home"})
                      }
                  })
                      .catch(
                          function(error){
                              console.log(error.data)
                          }
                      )
              }
            }
        }


        const Home = {
            template: `
            <div>
                    <table border="" cellspacing="" cellpadding="">
                    <tr>
                        <th>ID</th>
                        <th>项目名称</th>
        <!--                <th>负责人</th>-->
        <!--                <th>描述信息</th>-->
                    </tr>

                    <tr :key="item.id" v-for="item in projects ">
                        <td>{{item.id}}</td>
                        <td>{{item.title}}</td>

                    </tr>

                </table>
            </div>`,
            data(){
                return{
                    projects: []
                }
            },
            methods:{
              getProject(){
                  requestB.get(
                      '/api/projects',{headers: {Authorization: "Bearer" + window.localStorage.getItem('token')}}

                  ).then((response)=>{
                      this.projects = response.data.results
                      console.log(this.projects)

                  }).catch(function (error){
                      console.log(error.message)
                  })

              },
                // 在组件（每个组件都是一个vue实例）在组件初始化完毕之后，获取项目数据
                created(){
                  this.getProject()
                }

          }
        }
        // 2、 配置路由访问规则
       const routes = [
            {path: '/login', component:Login},
            // 通过name给路由命名
            {path:'/home', component: Home, name: "home"},
           // 将路径重定向到登录页面
           {path: "/", redirect: '/login'}
        ]

        // 3、 创建一个路由对象
        var  router = new VueRouter({
            routes: routes
        })


        var vm = new Vue({
          el: "#app",
          router: router,
        })
    </script>

</body>
</html>