Vue router
2020-07-24 14:20
18 查看
1、安装:npm install vue-router或cnpm install vue-router或yarn add vue-router
2、在新建router.js中引用如下代码
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
3、在src中新建view文件夹,在view新建例如:Home文件夹,在文件夹中新建index.vue
<template> <div id="home"> <Content /> </div> </template> <script> import Content from "../../components/Content.vue" export default { name: "index", data(){ return{ } }, components:{ Content, }, methods:{ } } </script> <style scoped> </style>
4、在router.js中设置如下两步
1、
import Home from './views/Home/'
2、
export default new VueRouter ({ routes: [ { path: '/', redirect: '/home' //设置默认指向 }, { path: '/home', component: Home } ] })
5、在App.vue中的div内引入
6、在main.js中
import router from ‘./router’
在new的实例中增加router,具体如下:
7、打开浏览器即可看到页面
相关文章推荐
- vue-router 二级动态路由传递数据
- vue-router 配置、跳转与传参
- # webpack+vue+vueRouter 模块化构建完整项目实例
- vue router学习——动态路由和嵌套路由
- vue-router2.0 组件之间传参及获取动态参数的方法
- vue eventbus和store解决router回退传值,并修改element tabs默认选中
- VueRouter2.0的编程式导航
- vue-router的动态路由传对象2种方式
- 自己实现低配版vue-router
- vue-router的详细用法
- 详解vue-router 2.0 常用基础知识点之router.push()
- vue-router命名路由和编程式路由传参讲解
- vue-router
- Vue Router创建方法及简单案例
- 使用vue-router beforeEach钩子遇到的一些小问题
- Vue躬行记(8)——Vue Router
- windows下vue-cli及webpack 构建网站及 路由vue-router的使用
- 简单了解如何使用vue-router和vue-resource
- webpack+vue+vueRouter+vuex 项目demo(附截图、代码、入门篇)
- vue-router动态路由