VUE笔记七 vue-router_如何看有没有router-CSDN博客

本文链接：https://blog.csdn.net/qq_49723651/article/details/121505447

vue-router

文章目录

vue-router
VUE笔记列表

说明

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

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

官方文档:

https://router.vuejs.org/installation.html

安装

基于第一个vue-cli进行测试学习；先查看node modules中是否存在vue-router

vue-router是一个插件包，所以我们还是需要用npm/cnpm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

// vue3
npm install vue-router:4.0.0-alpha.6 --save
// vue2
npm install vue-router@3.2.0

测试

vue3测试

首先在components目录下创建两个组件：

myHome组件：

<template>
    <div>
        <h1>这是一个home组件</h1>
    </div>
</template>

<script>
export default {
    name: "myHome"
}
</script>

myInfo组件：

<template>
    <div>
        <h1>这是一个Information组件</h1>
    </div>
</template>

<script>
export default {
    name:"myInfo"
}
</script>

<style scoped>
    h1 {
        color: green;
    }
</style>

安装路由，在src目录下，新建一个router.js，专门用来放路由。

// vue3导入vue-router管理器写法
import {createRouter,createWebHistory} from "vue-router"
// 导入两个组件的路径
import myHome from './components/myHome'
import myInfo from './components/myInfo'

//设置路由模式路径不带#号
const webHistory = createWebHistory()

const router = createRouter({
		//设置路由模式路径不带#号
    history:webHistory,
    // 设置路由
    routes:[
        {
            path:'/home',
            name:'home',
            component:myHome
        },
        {
            path:'/info',
            name:'info',
            component:myInfo
        }
    ]
})

// 导出默认路由器
export default router

在main.js中使用路由

import { createApp } from 'vue'
import ant from 'ant-design-vue'
import App from './App.vue'
import 'ant-design-vue/dist/antd.css'
import router from './router'

const app = createApp(App);
app.use(ant);
// 使用路由，一定要加
app.use(router);
app.mount('#app');

在App.vue中设置两个组件的入口

<template>
  <div>
      <img alt="Vue logo" src="./assets/logo.png">
      <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
      <!-- <a-button type="danger">这是一个按钮</a-button>
      <a-button type="primary">按钮</a-button> -->
      
			<!-- 类似于超链接 -->
      <router-link to="/home">
          <a-button type="primary">Home</a-button>
      </router-link>
      <router-link to="/info">
          <a-button type="danger">Infomation</a-button>
      </router-link>
      <!-- 不加就看不见 -->
      <router-view></router-view>
  </div>
</template>

<script>

// import HelloWorld from './components/HelloWorld.vue'
import ant from 'ant-design-vue'
import 'ant-design-vue/dist/antd'

export default {
  name: 'App',
  components: {
    // HelloWorld
    [ant.name]: ant
  }
}
</script>

运行

在这里插入图片描述

点击两个按钮就会将两个按钮渲染出来。

vue2测试

vue2的语法与vue3略有不同，但我们只以router.js文件和main.js文件举例。

router.js:

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

Vue.use(VueRouter)
const routes = [
    {
        path: '/home',
        name: 'home',
        component: () => import('./components/myHome.vue')
    }
]

const router = new VueRouter({
    mode: 'history',
    routes
})

export default router

main.js:

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import router from './router'

Vue.use(ElementUI);
Vue.use(router);

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')