vue新项目搭建vue-router 在项目中的使用

一、下载vue-router

npm install vue-router --save

二、编码

1、在项目中新建文件夹 router/index.js
```
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import page from '@/pages/index/index.vue'
import login from '@/pages/login/index.vue'

export default new VueRouter({
    routes: [
        {
            path: '/page',
            name: 'page',
            component: page,
            meta: {
                title: '首页'
            }
        }
        ,{
            path: '/login',
            name: 'login',
            component: login,
            meta: {
                title: '登录'
            }
        }
    ]
    ,mode: "history"
})

```

2、在main.js中全局使用router

```
import Vue from 'vue'
import App from './App.vue'
import Vant from 'vant';

import router from './router' //引入路由

import 'vant/lib/index.css';
Vue.use(Vant);

//修改路由标题
router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
      document.title = to.meta.title;
  }
  next();
})

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

```

2）在App.vue引入FooterGuide.vue组件 和 router-view 区域
<router-view></router-view> 重要
```
<template>
  <div id="app">
    
	<router-view></router-view> 
    <Index />
  </div>
</template>

import Index from './pages/index/index.vue'

export default {
  name: 'App',
  components: {
    Index
  }
}
</script>

```

4页面跳转
```
<template>
<div>
   <button @click="go" type="default">默认按钮</button>
</div>    
</template>

name: 'index',
  data () {
    return {
      msg: '哈哈'
    }
  },
  
  methods:{
	go(){
		this.$router.push({path:'/login'});
		
		//this.$router.replace({path:'/login'})
	}
  }
}
</script>
```

注:原创不易,转载请注明出处( https://micuu.com/new/494.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。

vue新项目搭建vue-router 在项目中的使用

留言反馈