admin管理员组文章数量:1633766
先讲讲全局引入,再聊聊如何使用吧。
首先在src文件下创建router文件,router文件中创建index.js
1.在index.js中配置好需要的路由.
代码:
//配置路由的地方
import Vue from 'vue';
import VueRouter from 'vue-router';
//引入路由组件
import Home from '@/pages/Home'
import Search from '@/pages/Search'
import Login from '@/pages/Login'
import Register from '@/pages/Register'
//配置路由
const router = new VueRouter({
//配置路由
routes: [
{
path: '/home',
component: Home
},
{
path: '/search',
component: Search
},
{
path: '/login',
component: Login
},
{
path: '/register',
component: Register
}
]
})
export default router
简单的聊聊:
import VueRouter from 'vue-router'; 引入, 路由本身就是一个构造函数,配置好key-value形式
- 1.一个路由就是一组映射关系(key-value)
- 2.key为路径,value可能是function或者component
2.使用配置好的路由,在入口文件main.js中引入使用.
代码:
import Vue from 'vue'
import App from './App.vue'
//index.js里配置的路由要在路口文件引入
import VueRouter from 'vue-router'
//引入路由器
import router from './router'
Vue.config.productionTip = false
Vue.use(VueRouter)
new Vue({
render: h => h(App),
//注册路由 [底下的写法是kv一致,省略router小写]
//注册完之后,组件身上都拥有$route,$router属性
router:router
}).$mount('#app')
简单聊聊:
//index.js里配置的路由要在路口文件引入
import VueRouter from 'vue-router'引入完之后就可注册了。
new Vue({
render: h => h(App),
//注册路由 [底下的写法是kv一致,省略router小写]
//注册完之后,组件身上都拥有$route,$router属性
router:router
}).$mount('#app')
这样路由配置就基本完成了,
版权声明:本文标题:Vue项目中引入全局路由 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729178469a1189018.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论