47.vue-路由的设置

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