vue 路由的安装及使用

进入项目

cd 项目

安装:

　　1.cmd下输入: npm install vue-router --save //安装路由
　

使用方法一:
　　1.在mian.js下引入，使用，配置路由

　　　

　 import VueRouter from 'vue-router'
　　        Vue.use(VueRouter)

　　　　const router(定义一个名字)=new VueRouter({

　　　　　　routes:[
　　　　　　　　{path:"(路由)",component:跳转的位置},
　　　　　　　　{path:"/",component:VueRouter}, //跳转的位置要引进来（import VueRouter from 'vue-router'）
　　　　　　　　{path:"路由",name:'取个名字',component:跳转的位置}, //输入个name，用于绑定个名字
　　　　　　　　{path:"/about(路由)",name:'取个名字',component:跳转的位置,children:[
　　　　　　　　{path:"/about/aboutour(路由)",name:'取个名字',component:跳转的位置},
　　　　　　　　{path:"/aboutour(路由)",name:'取个名字',component:跳转的位置}]}, //二级路由
　　　　　　　　{path:"(路由)",component:跳转的位置,beforeEnter: (to, from, next) => {
　　　　　　　　　　　例如:alert('非登录状态禁止访问页面');
　　　　　　　　　　　next(false); //禁止跳转到此页面
　　　　　　　　}},//路由独享守卫 针对指定页面 全局守卫也可以在此写
　　　　　　　　{path:"路由",name:'取个名字',components:{
　　　　　　　　　　default:'原本要跳转的',
　　　　　　　　　　'取的名字'：取的名字，
　　　　　　　　　　'取的名字'：取的名字
　　　　　　　　}},//一个页面想要另外一个页面的某些东西 在原本页面写入<route-view name="取个名字"></route-view>
　　　　　　　　{path:'*',redirect:'/'} //如果用户输入错误，默认展示页
　　　　　　],
　　　　　　mode:"history" //去掉后面的#号
　　　})

使用方法二

在src下建立文件夹router

在该文件夹建立index.js文件

index.js 例式

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

const Home = () => import('../views/home/Home')
const Category = () => import('../views/category/Category')
const Cart = () => import('../views/cart/Cart')
const Profile = () => import('../views/profile/Profile')
const Detail = () => import('../views/detail/Detail')

//安装插件
Vue.use(VueRouter)

//创建路由对象
const routes = [
  {
    path: '',
    redirect: '/home'

  },

  {
    path: '/profile',
    component: Profile
  },
  {
    path: '/detail/:num_iid',
    component: Detail

  }

]
const router = new VueRouter({
  routes,
  mode: 'history'
})
//导出
export default router

main.js代码

import Vue from 'vue'
import App from './App.vue'
import router from "@/router";

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

使用方法三

在src下建立文件夹router

在该文件夹建立index.js文件

index.js 例式（）

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../components/Home";
Vue.use(VueRouter);

const router = new VueRouter({
    routes:[
        {
            path: '',
            redirect: '/home'

        },
        {
            path: '/home',
            component: Home
        },
    ],
    mode: 'history'
})
//导出
export default router

main.js

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

import router from "./router";

//导入element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'


Vue.config.productionTip = false

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

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  },
  data(){
    return{
      result:''
    }
  },
  created() {
   
  }
}
</script>

<style>

</style>

Home.vue

<template>
<div>
  <el-container>
    <el-header>header</el-header>
    <el-main>main</el-main>

  </el-container>
</div>
</template>

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

<style scoped>

</style>