Vue路由配置-优快云博客

本文链接：https://blog.youkuaiyun.com/onion_line/article/details/79387988

本文详细介绍了如何在Vue项目中设置和使用路由。从安装必要依赖开始，到创建多个视图组件并通过路由链接相互导航，逐步展示了Vue Router的基本用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1）安装 npm install vue-resource --save

npm install json-server --save

环境我已经搭配好了

2）我是用HBuilder打开刚才搭配的文件夹 Vuedemo(自己搭建的文件夹)/src (Vuedemo/src)

src文件夹下打开 App.vue

删掉这个你的页面就会变成一片空白

3）打开src/components文件夹并创立两个vue文件

我建立了一个Demo.vue 和 About.vue

4) 把两个文件引用在页面上面去

在Demo.vue文件编写代码如下图

在App.vue编写代码

编写成功如下图

5）打开src文件夹下的main.js编写代码

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import vueRouter from 'vue-router'
import vueResource from 'vue-resource'
import Demo from "./components/demo"
import About from "./components/about"


Vue.use(vueRouter)
Vue.use(vueResource)
Vue.config.productionTip = false
var router=new vueRouter(
	{
		mode:"history",//默认模式hash 去掉#号用history默认的模式是hash
		base:"__dirname",//当前路径
    routes:[
    {path:"/",component:Demo},//当前路径为/表示是主页面
    {path:"/",component:About}
    ]
	}
)
/* eslint-disable no-new */
new Vue({
  //el: '#app',
  //替代a的是router-link
  //替代href是to
  //渲染组件router-view
  router,
  template: `
  <div id="app">
    <ul>
      <li>
       <router-link to="/">demo</router-link>
       <router-link to="/about">about</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
 `,
    //components: { App }
}).$mount("#app")

6）打开网页配置成功