VUE学习-路由（七）

最新推荐文章于 2023-10-09 09:21:39 发布

霹雳娇娃么么哒

最新推荐文章于 2023-10-09 09:21:39 发布

阅读量192

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44968323/article/details/118527320

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、路由

https://router.vuejs.org/guide/#html

vue-router是让构建单页面应用变得简单

单页面应用：

“应用”指的就是网站，

“单页面应用”：指一个网站的所有功能都集成在同一个页面上，从而保证了用户在不同功能之间跳转的时候，仅通过js代码就可以完成切换，对于浏
览器来说是无刷新的，也正因如此，用户在尝试通过url地址在浏览器里直接访问某个功能的时候，浏览器会先打开首页（index.html），在进入
一个vue的根页面（App.vue），然后vue router再根据url的后半部分，在根页面的基础上，再继续渲染不同的功能，这些功能在页面上的具体
位置，是由代码里的<router-view>标签来决定的，但是只要用户进入到这个网站的任何一个功能，后面在js层面就可以做到功能之间的相互跳
转，从而就实现了浏览器无刷新的效果，所以针对单页面应用的路由器vue Router来说，他要解决的核心问题有两个：1、用户在不同的功能之间
跳转的时候，不能惊动浏览器去刷新。2、用户通过url可以在浏览器里顺利的直接访问某个功能

A）复习锚点

url后加#33就可以到对应的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    111111<br/>111111<br/>111111<br/>111111<br/>
    111111<br/>111111<br/>111111<br/>111111<br/>
    111111<br/>111111<br/>111111<br/>111111<br/>
    111111<br/>111111<br/>111111<br/>111111<br/>
    111111<br/>111111<br/>111111<br/>111111<br/>
    111111<br/>111111<br/>111111<br/>111111<br/>
    111111<br/>111111<br/>111111<br/>111111<br/>
    111111<br/>111111<br/>111111<br/>111111<br/>
    111111<br/>111111<br/>111111<br/>111111<br/>
    111111<br/>111111<br/>111111<br/>111111<br/>
    111111<br/>111111<br/>111111<br/>111111<br/>
    111111<br/>111111<br/>111111<br/>111111<br/>
    
    222222<br/>222222<br/>222222<br/>222222<br/>
    222222<br/>222222<br/>222222<br/>222222<br/>
    222222<br/>222222<br/>222222<br/>222222<br/>
    222222<br/>222222<br/>222222<br/>222222<br/>
    222222<br/>222222<br/>222222<br/>222222<br/>
    222222<br/>222222<br/>222222<br/>222222<br/>
    222222<br/>222222<br/>222222<br/>222222<br/>
    222222<br/>222222<br/>222222<br/>222222<br/>
    <a name="33"></a>
    <h1 id="44"></h1>
    333333<br/>333333<br/>333333<br/>333333<br/>
    333333<br/>333333<br/>333333<br/>333333<br/>
    333333<br/>333333<br/>333333<br/>333333<br/>
    333333<br/>333333<br/>333333<br/>333333<br/>
    333333<br/>333333<br/>333333<br/>333333<br/>
    333333<br/>333333<br/>333333<br/>333333<br/>
    333333<br/>333333<br/>333333<br/>333333<br/>
    333333<br/>333333<br/>333333<br/>333333<br/>
    333333<br/>333333<br/>333333<br/>333333<br/>
    333333<br/>333333<br/>333333<br/>333333<br/>
    333333<br/>333333<br/>333333<br/>333333<br/>
    333333<br/>333333<br/>333333<br/>333333<br/>
    333333<br/>333333<br/>333333<br/>333333<br/>
    333333<br/>333333<br/>333333<br/>333333<br/>
    333333<br/>333333<br/>333333<br/>333333<br/>
    333333<br/>333333<br/>333333<br/>333333<br/>
    333333<br/>333333<br/>333333<br/>333333<br/>
    333333<br/>333333<br/>333333<br/>333333<br/>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3sN1InW7-1625569275278)(image/106.png)]

B）起步

https://router.vuejs.org/zh/

1、创建一个新的html页面

导入vue.js和vue router.js

想要达到的目的是点击“页面1”和“页面2”展示不一样的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
      	<a href="">页面1</a>
        <a href="">页面2</a>
        <page1></page1>
        <page2></page2>
    </div>

    <!-- 导入vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <!-- 导入vue-router -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    <script>
        Vue.component('page1', {
            template:`
                <div>11</div>
            `
        })
        Vue.component('page2', {
            template:`
                <div>22</div>
            `
        })

        new Vue({
            el:"#app"
        })
    </script>
</body>
</html>

2、基本用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/">页面1</router-link>
        <router-link to="/a">页面2</router-link>
        <!-- 可以通过tag属性，设置渲染成特定的标签 -->
        <router-link tag="button" to="/b">页面3</router-link>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>

    <!-- 导入vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <!-- 导入vue-router -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    <script>
        let page1 = Vue.component('page1', {
            template:`
                <div>11</div>
            `
        })
        let page2 = Vue.component('page2', {
            template:`
                <div>22</div>
            `
        })
        let page3 = Vue.component('page3', {
            template:`
                <div>33</div>
            `
        })

        new Vue({
            el:"#app",
            //定义vue路由信息数组
            router : new VueRouter({
                //定义路由信息
                routes:[
                    //定义一个具体的路由，path是路由的地址，component是路由映射的组件
                    {
                        path:"/",
                        component:page1,
                    },
                    {
                        path:"/a",
                        component:page2,
                    },
                    {
                        path:"/b",
                        component:page3,
                    }
                ]
            })
        })
    </script>
</body>
</html>

二、脚手架中使用路由

1、安装vue router

npm install vue-router --save

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xjag4usy-1625569275280)(image/107.png)]

2、导入并use

在main.js文件中导入并use

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TxgW3NFm-1625569275281)(image/108.png)]

//导入vue
import Vue from 'vue'
//导入App.vue组件
import App from './App.vue'
//引入全局样式
import './assets/css/common.css'
//引入element
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//由于element-ui是一个插件，一定要use
Vue.use(ElementUI);
//导入vue-router插件
import VueRouter from 'vue-router'
//use路由插件
Vue.use(VueRouter)

//不显示生产提示信息
Vue.config.productionTip = false

//创建一个vue实例
new Vue({
  //利用render函数，渲染App.vue组件到容器中
  render: h => h(App),
  //$mount（‘App’）表示挂载一个id为app的容器，等价于el：‘#app’
}).$mount('#app')

3、简单使用

在main.js中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LSTCH8MM-1625569275282)(image/109.png)]

//导入vue
import Vue from 'vue'
//导入App.vue组件
import App from './App.vue'
//引入全局样式
import './assets/css/common.css'
//引入element
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//由于element-ui是一个插件，一定要use
Vue.use(ElementUI);
//导入vue-router插件
import VueRouter from 'vue-router'
//use路由插件
Vue.use(VueRouter)
//导入页面组件
import Page1 from './views/Page1.vue'
import Page2 from './views/Page2.vue'

//不显示生产提示信息
Vue.config.productionTip = false

//创建一个vue实例
new Vue({
  //利用render函数，渲染App.vue组件到容器中
  render: h => h(App),
  //注册路由
  router:new VueRouter({
    routes:[
      {
        path:"/",
        component:Page1
      },
      {
        path:"/a",
        component:Page2
      }
    ]
  })
  //$mount（‘App’）表示挂载一个id为app的容器，等价于el：‘#app’
}).$mount('#app')

在App.vue中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gHduI34U-1625569275282)(image/110.png)]

<template>
  <div id="app">
    <div class="header">
      <Header></Header>
    </div>
    <div class="content flex">
      <div class="left">
        <Left></Left>
      </div>
      <div class="right">
        <!-- 使用路由视图组件，该组件会渲染对应的路由页面信息 -->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>

//导入头部组件和左侧组件
import Header from'./components/Header.vue'
import Left from './components/Left.vue'
// import Page1 from './views/Page1.vue'
// import Page2 from './views/Page2.vue'

export default {
  //当前组件名称
  name: 'App',
  //注册页面中使用的组件
  components: {
    Header,
    Left,
    // Page1,
    // Page2
  }
}
</script>

<style>
#app{
  widows: 100vm;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.header{
  height: 60px;
}
.content{
  flex: 1;
}
.left{
  width: 200px
}
.right{
  flex:1;
  padding: 10px;
}
</style>

4、查看页面效果

页面是没有任何刷新的

http://localhost:8080/#/a

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bSARrUQq-1625569275283)(image/111.png)]

http://localhost:8080/#/

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0gUlz3yJ-1625569275283)(image/112.png)]

5、router-link

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Guvo9UXe-1625569275283)(image/113.png)]

<template>
  <div id="app">
    <div class="header">
      <Header></Header>
    </div>
    <div class="content flex">
      <div class="left">
        <Left></Left>
      </div>
      <div class="right">
        <router-link to="/">页面一</router-link>&nbsp;&nbsp;&nbsp;
        <router-link to="/a">页面a</router-link>
        <!-- 使用路由视图组件，该组件会渲染对应的路由页面信息 -->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>

//导入头部组件和左侧组件
import Header from'./components/Header.vue'
import Left from './components/Left.vue'
// import Page1 from './views/Page1.vue'
// import Page2 from './views/Page2.vue'

export default {
  //当前组件名称
  name: 'App',
  //注册页面中使用的组件
  components: {
    Header,
    Left,
    // Page1,
    // Page2
  }
}
</script>

<style>
#app{
  widows: 100vm;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.header{
  height: 60px;
}
.content{
  flex: 1;
}
.left{
  width: 200px
}
.right{
  flex:1;
  padding: 10px;
}
</style>

6、将链接放在左侧导航

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Nyy4iUOY-1625569275283)(image/114.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qhd5iHM9-1625569275284)(image/115.png)]

<template>
  <div class="left-nav">
    <el-menu
      default-active="1-1"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>人员管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1">
            <!-- router-link默认是a标签 -->
            <router-link to="/">人员信息</router-link>
          </el-menu-item>
          <el-menu-item index="1-2">
            <router-link to="/a">任务安排</router-link>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>资产管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="2-1">
            <router-link tag="span" to="/">PC信息</router-link>
          </el-menu-item>
          <el-menu-item index="2-2">
            <router-link tag="span" to="/a">主机信息</router-link>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>任务中心</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="3-1">任务信息</el-menu-item>
          <el-menu-item index="3-2">任务分析</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style>
.left-nav{
    background-color: #545c64;
    height: 100%;
}
</style>

7、分离代码

问题：如果路由很多，那么main.js中的代码就会很多，需要将路由相关的代码抽离

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J9KjqxYQ-1625569275285)(image/116.png)]

a、在src目录下新建router文件夹，并创建index.js文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f1FIFXmR-1625569275285)(image/117.png)]

//创建一个路由对象，配置所有的路由信息
//并将路由对象导出去
export default new VueRouter({
    routes:[
      {
        path:"/",
        component:Page1
      },
      {
        path:"/a",
        component:Page2
      }
    ]
  })

b、在main.js文件中导入

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z4GYwF9a-1625569275285)(image/118.png)]

//导入vue
import Vue from 'vue'
//导入App.vue组件
import App from './App.vue'
//引入全局样式
import './assets/css/common.css'
//引入element
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//由于element-ui是一个插件，一定要use
Vue.use(ElementUI);
//导入vue-router插件
import VueRouter from 'vue-router'
//use路由插件
Vue.use(VueRouter)
//导入页面组件
import Page1 from './views/Page1.vue'
import Page2 from './views/Page2.vue'

//导入路由信息对象
//import router from './router/index.js'
//默认就是导入包里面的index.js文件
import router from './router'

//不显示生产提示信息
Vue.config.productionTip = false

//创建一个vue实例
new Vue({
  //利用render函数，渲染App.vue组件到容器中
  render: h => h(App),
  //注册路由
  router
  //$mount（‘App’）表示挂载一个id为app的容器，等价于el：‘#app’
}).$mount('#app')

c、再次修改

Index.js

//导入vue
import Vue from 'vue'
//导入vue-router插件
import VueRouter from 'vue-router'
//use路由插件
Vue.use(VueRouter)
//导入页面组件
import Page1 from '../views/Page1.vue'
import Page2 from '../views/Page2.vue'

//创建一个路由对象，配置所有的路由信息
//并将路由对象导出去
export default new VueRouter({
    routes:[
      {
        path:"/",
        component:Page1
      },
      {
        path:"/a",
        component:Page2
      }
    ]
  })

Main.js

//导入vue
import Vue from 'vue'
//导入App.vue组件
import App from './App.vue'
//引入全局样式
import './assets/css/common.css'
//引入element
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//由于element-ui是一个插件，一定要use
Vue.use(ElementUI);

//导入路由信息对象
//import router from './router/index.js'
//默认就是导入包里面的index.js文件
import router from './router'

//不显示生产提示信息
Vue.config.productionTip = false

//创建一个vue实例
new Vue({
  //利用render函数，渲染App.vue组件到容器中
  render: h => h(App),
  //注册路由
  router
  //$mount（‘App’）表示挂载一个id为app的容器，等价于el：‘#app’
}).$mount('#app')

8、 $r o u t e r 和$ route

问题：

以上的方式采用的都是router-link方式在页面上直接去跳转，但是在实际情况中，有部分功能需要先进行判断等再进行跳转的情况

a、新增一个view

在views目录下新增Page3.vue

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZDLs2Eye-1625569275285)(image/119.png)]

在index.js中导入配置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CkRKfpV5-1625569275285)(image/120.png)]

b、修改App.vue

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MDuBqYQd-1625569275285)(image/121.png)]

<template>
  <div id="app">
    <div class="header">
      <Header></Header>
    </div>
    <div class="content flex">
      <div class="left">
        <Left></Left>
      </div>
      <div class="right">
        <router-link to="/">页面1</router-link>&nbsp;&nbsp;&nbsp;
        <router-link to="/a">页面2</router-link>&nbsp;&nbsp;&nbsp;
        <button @click="gotoB">页面3</button>
        <!-- 使用路由视图组件，该组件会渲染对应的路由页面信息 -->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>

//导入头部组件和左侧组件
import Header from'./components/Header.vue'
import Left from './components/Left.vue'
// import Page1 from './views/Page1.vue'
// import Page2 from './views/Page2.vue'

export default {
  //当前组件名称
  name: 'App',
  //注册页面中使用的组件
  components: {
    Header,
    Left,
    // Page1,
    // Page2
  },
  methods:{
    //跳转到页面3的方法
    gotoB(){
      //在跳转之前，可以进行一些判断（如：权限、身份之类）
      //$route就是当前路由信息
      //$router就是当前的路由对象
      if(this.$route.path!=='/b')
        this.$router.push('/b')
    }
  }
}
</script>

<style>
#app{
  widows: 100vm;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.header{
  height: 60px;
}
.content{
  flex: 1;
}
.left{
  width: 200px
}
.right{
  flex:1;
  padding: 10px;
}
</style>

霹雳娇娃么么哒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE学习-路由（七）

一、路由https://router.vuejs.org/guide/#htmlvue-router是让构建单页面应用变得简单单页面应用：“应用”指的就是网站，“单页面应用”：指一个网站的所有功能都集成在同一个页面上，从而保证了用户在不同功能之间跳转的时候，仅通过js代码就可以完成切换，对于浏览器来说是无刷新的，也正因如此，用户在尝试通过url地址在浏览器里直接访问某个功能的时候，浏览器会先打开首页（index.html），在进入一个vue的根页面（App.vue），然后vue router再根
复制链接

扫一扫