vue--路由

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

使用路由先安装路由模块：

npm install vue-router --save

第一步：创建组件

https://www.cnblogs.com/e0yu/p/9795686.html

第二步：main.js引入并使用vue路由

import VueRouter from 'vue-router';//引入组件
Vue.use(VueRouter);//使用组件

第三步：引入组件

import Header from './components/Header.vue';
import Hello from './components/Hello.vue';

第三步：配置路由

//配置路由
const routes = [
    {path:'header',components:Header},
    {path:'hello',components:Hello},
]

第四步：实例化VueRouter

// 实例化 vurRouter
const router = new VueRouter({
  routes: routes
})

第五步：在 App.vue下设置路由的出口

<router-view></router-view>

第六步：点击路由进行跳转

<router-link to="/header">首页</router-link>
<router-link to="/hello">你好</router-link>

第七步：配置默认路由

const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '*', redirect:'/home'}, // 默认跳转路由
]

示例代码：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 VueResource from "vue-resource"
Vue.config.productionTip = false
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 1、创建组件
import Home from './components/Home.vue'
import News from './components/News.vue'
// 2、配置路由
const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '*', redirect:'/home'}, // 默认跳转路由
]
// 3、实例化 vurRouter
const router = new VueRouter({
  routes: routes
})
// 4、挂载路由
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
// 将 <router-view></router-view> 入口放到App.vue 里面

App.vue

<template>
  <div >
    <h1>{{msg}}</h1>
    <router-link to="/home">首页</router-link>
    <router-link to="/news">新闻</router-link>
    <router-view></router-view/>
  </div>
</template>

以上是 vue--路由 的全部内容， 来源链接： utcz.com/z/380577.html

回到顶部