47.vue-路由的设置

2022-06-04 02:33:40 阅读：180 来源： 互联网

标签：About vue 47 Vue VueRouter import router 路由

1.说明 vue-router@4 版本支持VUE3版本，不支持VUE2，所以VUE2需要安装vue-router@3版本

2.打开项目终端，输入：npm i vue-route@3

3.引入，应用

4.创建router文件夹，里面再创建index.js文件

index.js:

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from "../components/About"
import Home from "../components/Home"

//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:"/about",
            component:About
        },
        {
            path:"/home",
            component:Home
        }
    ]
})

main.js

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

//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'

Vue.config.productionTip = false
//应用插件
Vue.use(ElementUI)
Vue.use(VueRouter)

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

app.vue:

<template>
    <div>
        <div class="row">
            <div class="col-xs-offset-2 col-xs-8">
                <div class="page-header"><h2>Vue Router Demo</h2></div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2 col-xs-offset-2">
                <div class="list-group">
                    <!-- 原始html中我们使用a标签实现页面的跳转 -->
                    <!-- <a class="list-group-item active" href="./about.html">About</a> -->
                    <!-- <a class="list-group-item" href="./home.html">Home</a> -->
                    
                    <!-- vue中截至router-link标签实现路由的切换 -->
                    <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
                    <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="panel">
                    <div class="panel-boby">
                        <!-- 指定组件出现的位置 -->
                        <router-view></router-view>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

<style>

</style>

About.vue:

PS:运行如果报错：

error Component name "About" should always be multi-word vue\multi-word-component-names

请关闭语法检查：lintOnSave:false

设置ok,再次运行：npm run serve

标签：About,vue,47,Vue,VueRouter,import,router,路由
来源： https://www.cnblogs.com/mxx520/p/16341153.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

47.vue-路由的设置