[JavaScript知识库]vue-router路由 配置

Vue Router : 路由(用vue init webpack 项目名创建的项目)

说明

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

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

安装

基于第一个vue-cli进行测试学习，先看mode_modules是否存在vue-router

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

npm install vue-router --save-dev

原生vue基础工程长这样:

App.vue

<template>
	<div id="app">
    </div>
</template>
<script>
	export default{
        name: 'App'
    }
</script>
<style>
    #app{
        font-family: 'Avenir' , Helvetica, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

我们开发都在/src中开发所以index.html不用动

export default{
        name: 'App'
    }

导入了一个App

让main.js让它引用过来:

main.js(用vue init webpack 项目名创建的项目)

import Vue from 'vue'
import App from './App'

Vue.config.profuctionTip = false;

/*eslint-disable no-new*/
new Vue({
    el: '#app',
    components: { App },
    template: '<App/>'
});

main.js(用vue create 项目名创建的项目)

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')

import Vue from 'vue'

这个'vue'我们是从模块(node_modules)里面提取出来的

import App from './App'

这个'./App'是我们自己定义的，在当前目录下

那我们import VueRouter from ''也去找node_modules里的组件就好了

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueRouter from 'vue-router'

//显示声明使用 VueRouter
Vue.use(VueRouter);

createApp(App).use(store).use(router).mount('#app')

src>router>index.js

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

import Content from '../components/Content'//跳转的组件也需要导入,'../上一级目录'

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

//要让别人使用：配置导出路由
export default new Reuter({
    routes: [
        {
            //路由路径
            path: '/content',
            name: 'conent',//一般我们还会给它配个名字
            
            //跳转的组件
            component: Content
        }
    ]
});

在main.js启用路由

只要我们是index文件它会默认的加载只需要找文件

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

怎么用

new VUe({

? el:’#app’,

//配置路由
router,

? components:{ App },

? template: '<App/>'

});

注: vue create 项目名创建的vue3.0项目直接createApp(App).use(store).use(router).mount('#app')添加好了

定义好后去App.vue去使用

以前html用a标签跳转页面，vue则是通过一个<router-link to=""></router-link>

• 一个<router-link to=""></router-link>:跳转链接。控制路由
• 一个<router-view></router-view>展示视图。控制页面展示

注:用vue create 项目名创建的vue工程是带有vue-router包和router和里面的index.js文件(前端命名规则：每个东西的主配置都叫index)